相关文章
- 开篇
- 列表
- 表单
- 角色和权限（编写中）
- 查询（编写中）
- 操作按钮（编写中）
上一篇介绍了一下如何实现一个可以依赖 json 渲染的列表控件，既然需要 json 文件，那么要如何维护这个 json 文件就成了重点，如果没有好的维护方案的话，那么还不如直接用UI库。
所以需要我们做一个维护 json 文件的小工具，维护 json 有多方法：
- 最基础的方法就是手撸，显然这个是下下策。
- 可以通过编辑器的插件来维护，不过这种方式针对所有 json，不会对某种需求做优化。
- 或者做一套维护 json 的增删改查，这样可以维护 json 的每一个属性，只是实现起来比较繁琐。
- 最后就是可视化 + 拖拽的方式，对于某些属性的修改，用起来会非常爽。
于是我们发扬一不怕苦，二不怕累的钻研精神，终于做了一个比较完美的小工具，可以非常方便的维护 json 文件。
小工具的功能
- 通过拖拽的方式修改一部分属性。
- 修改【列表】的属性。
- 添加、修改【列】的属性。
- 修改后立即重新渲染看效果。
修改的时候可以立即看到效果，json 对应的是组件的属性，更改后如果能够立即看到效果，显然更直观。
实现方式
可视化 + 拖拽 + 手势 的方式修改属性
可以实现以下功能：
- 表头和内容的对齐方式。
- 调整列的先后顺序，交换两个列的位置。
- 调整列宽
- 移除列
优点是用起来比较爽，尤其是调整列的宽度、先后顺序的时候，非常直观、简单、快捷。 当然缺点也很明显，只能用于维护一部分属性，其他属性的维护还得做表单维护。
列表属性
我们可以基于 el-table 的属性做一个表单：
修改表单的值，会立即渲染，可以实时查看属性变化后的效果。
也可以快速掌握 el-table 各个属性都是什么意思。
- 模板
使用低代码的表单控件来维护列表的两个属性：低代码需要的属性使用一个控件，el-table 需要的属性使用另一个控件。
<!--低代码需要的属性-->
<nf-form
v-form-drag="baseGridProps"
:model="meta.gridMeta"
v-bind="baseGridProps"
size="small"
label-width="110px"
>
</nf-form>
<!--el-table需要的属性-->
<nf-form
v-form-drag="baseGridTable"
:model="meta"
v-bind="baseGridTable"
size="small"
label-width="110px"
>
</nf-form>
然后加载需要的json 文件，绑定属性。
- ts
import { defineComponent, reactive, computed, watch } from 'vue'
import grid_base from './json/grid-base.json'
import grid_table from './json/grid-table.json'
export default defineComponent({
name: 'nf-help-grid-item',
props: {
meta: Object,
reMeta: Object
},
setup(props, context) {
// 基础属性的表单需要的 meta，创建表单用
const baseGridProps = reactive(grid_base)
const baseGridTable = reactive(grid_table)
// 定义表单的 model
const { meta, reMeta } = props
watch(props.meta, () => {
// 看看属性，如果是默认值，则去掉
Object.keys(baseGridTable.itemMeta).forEach(key => {
const item = baseGridTable.itemMeta[key]
const colName = item.colName
const val = props.meta[colName]
switch (colName) {
case 'height':
case 'show-header':
case 'fit':
case 'select-on-indeterminate':
case 'lazy':
// 不删除的属性
props.reMeta[colName] = val
break
default:
// 如果是默认值、空，则删除属性
if (!(val) || val === item.defValue) {
delete props.reMeta[colName]
} else {
props.reMeta[colName] = val
}
break
}
})
})
// 设置 colOrder 的备选项
watch(meta.itemMeta, () => {
baseGridProps.itemMeta[200].optionList.length = 0
Object.keys(meta.itemMeta).forEach(key => {
const item = meta.itemMeta[key]
baseGridProps.itemMeta[200].optionList.push({
"value": item.id,
"label": item.label // colName
})
})
}, {immediate: true})
return {
baseGridProps,
baseGridTable,
json
}
}
})
卡片的形式维护列表属性
<!--维护列表的 meta -->
<el-row :gutter="20">
<el-col :span="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>列表属性</span>
</div>
</template>
<el-scrollbar height="600px">
<help-grid-base :meta="gridMeta" :reMeta="reMeta"/>
</el-scrollbar>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>导出json</span>
</div>
</template>
<help-grid-ouput :reMeta="gridMeta"></help-grid-ouput>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>列属性</span>
</div>
</template>
<help-grid-col :formMeta="gridMeta"/>
</el-card>
</el-col>
</el-row>
使用 el-card 把列表的属性和列的属性整合一下。
“抽屉”的方式维护列表属性
<!--模板-->
<el-drawer
v-model="drawerInfo.isShow"
title="维护 meta"
:with-header="false"
:modal="false"
size="450px"
>
<!--表单-->
<el-tabs type="border-card">
<el-tab-pane label="列表">
<!--基础属性-->
<component
:is="tabComp.base"
:meta="gridMeta"
:reMeta="reMeta"
></component>
</el-tab-pane>
<el-tab-pane label="列">
<!--列-->
<component
:is="tabComp.col"
:formMeta="gridMeta"
></component>
</el-tab-pane>
<el-tab-pane label="导出">
<component
:is="tabComp.output"
:reMeta="reMeta"
></component>
</el-tab-pane>
</el-tabs>
</el-drawer>
列的属性
我们可以基于 el-table-colmun 的属性做一个表单：
可以修改列的属性：
- 对齐方式
- 字段名、标签
- 宽度
- 固定列
- 是否排序
- 是否可以拖拽
- 是否显示提示
- class名称
- 其他
用 “抽屉”的方式维护列的属性
使用 el-drawer 整合列表属性、列属性和导出的功能。这样不影响列表页面的使用，需要的时候才需要打开“抽屉”。
导出
json 维护好之后需要导出的功能，这里提供了两种方式：
- 作为 el-table 的属性，使用
v-bind="tableProps"的方式绑定。
- json 文件的方式，可以用于渲染列表。
- 导出 json（得到 json 文件或者 js 对象）
