Soul-表格设计器

可以在少量编码的情况下,直接实现后台数据与表格数据的绑定

• 支持可视化修改表头
• 支持可视化修改每列展示的类型(input switch action radio date tag)等等
• 支持动态切换组件绑定的数据源

安装外部依赖

外部依赖需要安装,根据自己的项目检查,如果已安装的可以忽略

• @vueuse/core
• @arco-design/web-vue
• @icon-park/vue-next
• vuedraggable
• axios
• vue
• uuid

npm i @vueuse/core @arco-design/web-vue @icon-park/vue-next vuedraggable axios vue uuid

使用方式

1. 引入依赖包

npm install soul-table

2. 引入组件

在man.js中引入核心文件和css文件

import soulTable from "soul-table"
import "soul-table/style.css"

3.注入插件

import { createApp } from 'vue'
import App from './App.vue'
// 文件引入
import soulTable from 'soul-table'
// 样式文件
import 'soul-table/style.css'
let app = createApp(App)
//使用use方法注入
app.use(soulTable)
app.mount('#app')

4. 在组建中使用

<template>
  <soul-table></soul-table>
</template>

5. 给组建添加id

需要给组件添加一个不重复的id即可,随意添加任何id,这个是必须传递的

<template>
  <soul-table componentId="ll520"></soul-table>
</template>

模块化按需导入

import { soulTable } from 'soul-table'
import 'soul-table/dist/style.css'

<template>
  <soul-table componentId="ll520" />
</template>

配置项config

可以额外对请求的参数进行配置,配置方法如下 在app.use的第二个参数传入配置 配置项示例:

// ...此处省略代码...
let config = {
  baseURL: '/proxyApi', //基础 baseURL
  app_id: '97e4291cd9', //  app_id 请求参数
  identity: '04cee817772adaeda8c38acd331c4bd4', // identity 请求参数
  headers: {
    //请求头配置
    shopCode: '3d5NAnDv', //shopCode
    Authorization: 'Bearer ' + localStorage.getItem('Authorization') //token配置
  }
}

app.use(soulTable, config)

进入设计模式

在当前目录的结尾使用query带上参数 mode="setting"即可

// 比如当前网址 http://localhost:5173

//在浏览器中输入:
http://localhost:5173?mode=setting