一、背景
在项目上线测试的时候，关于同一个界面的表格，不同的用户会出现不同的字段排列需求，有些用户希望把A字段排在最前面，有些用户则希望A字段不显示。针对这种情况，开发一个表格自定义配置的功能，每个用户根据自己的需求自己去设定表单字段的显示、隐藏、字段的宽度、左右固定等。
二、效果图
1.配置界面，可以拖动字段的顺序，是否显示、宽度、左右固定
三、实现方式
3.1 整体实现思路
将前端表格配置好的字段方式的Json存到数据库，用户打开界面的时候去数据库读取这个配置，前端用循环动态的渲染elemnet-table的表头即可。如果这个用户没有配置过，则读取默认的配置，默认配置写在前端一个JSON里面，每个vue界面的table设置一个table key用来标识table列表，数据库层面查找的时候根据用户code和tablekey来找到这个用户关于这个表格的配置。
最后’在前端进行动态渲染表头即可。整个功能的重点在于前端动态的拿到后端的json跟默认的存在前端的Json进行比较，然后生成最终的一个配置的json（注意：要以前端的默认Json为准，因为要考虑到字段的新增和删除的情况）
3.2 建立配置表 test_table_config
CREATE TABLE `test_table_config` (
`Id` int NOT NULL AUTO_INCREMENT,
`UserCode` varchar(100) COLLATE utf8mb4_bin NOT NULL COMMENT '用户编码',
`TableKey` varchar(200) COLLATE utf8mb4_bin NOT NULL COMMENT '表名key',
`TableConifgJsonStr` varchar(8000) COLLATE utf8mb4_bin NOT NULL COMMENT '配置的字段Json',
`IsDelete` tinyint NOT NULL COMMENT '是否删除',
`CreateTime` datetime DEFAULT NULL COMMENT '创建时间',
`CreateUserId` int DEFAULT NULL COMMENT '创建人id',
`UpdateTime` datetime DEFAULT NULL COMMENT '更新时间',
`DeleteTime` datetime DEFAULT NULL COMMENT '删除时间',
`UpdateUserId` int DEFAULT NULL COMMENT '更新用户',
`DeleteUserId` int DEFAULT NULL COMMENT '删除人',
PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin COMMENT='table配置表';
3.3 服务端test_table_config的crud
/**
* 新增table配置
*/
// @PreAuthorize("@ss.hasPermi('system:tableconfig:add')")
public AjaxResult add( TestTableAddInput testTableAddInput)
{
TestTableConfig testTableConfig = new TestTableConfig();
testTableConfig.setUserCode(this.getUsername());
testTableConfig.setTableKey(testTableAddInput.getTableKey());
testTableConfig.setTableConifgJsonStr(testTableAddInput.getTableConifgJsonStr());
testTableConfig.setCreateUserId(this.getUserId());
testTableConfig.setCreateBy(this.getUsername());
testTableConfig.setCreateTime(new Date());
testTableConfig.setIsDelete(0l);
return toAjax(testTableConfigService.insertTestTableConfig(testTableConfig));
}
@Log(title = "编辑table配置", businessType = BusinessType.INSERT)
@PostMapping
@Anonymous
@ApiOperation("编辑table配置")
public AjaxResult addAndUpdate(@RequestBody TestTableAddInput testTableAddInput)
{
TestTableConfig testTableConfig = new TestTableConfig();
if(testTableAddInput.getTableConifgJsonStr() == null || testTableAddInput.getTableConifgJsonStr().length()==0)
{
return error("没有传入配置Json");
}
// 先查询
testTableConfig = testTableConfigService.selectTestTableConfigByUserAndTableKey(this.getUsername(),testTableAddInput.getTableKey());
if(testTableConfig==null) // 更新
{
return add(testTableAddInput);
}
else
{
testTableConfig.setTableConifgJsonStr(testTableAddInput.getTableConifgJsonStr());
// 修改
return edit(testTableConfig);
}
}
/**
* 修改table配置
*/
// @PreAuthorize("@ss.hasPermi('system:tableconfig:edit')")
public AjaxResult edit(TestTableConfig testTableConfig)
{
testTableConfig.setUpdateUserId(this.getUserId());
testTableConfig.setUserCode(this.getUsername());
testTableConfig.setUpdateTime(new Date());
testTableConfig.setIsDelete(0l);
return toAjax(testTableConfigService.updateTestTableConfig(testTableConfig));
}
3.4 前端配置组件界面
<template>
<div>
<div>
<vuedraggable v-model="paramClounm">
<transition-group>
<div v-for="(item,index) in paramClounm" :key="item.key" style="margin:10px; text-align: left;">
<el-row :gutter="24">
<el-col :span="8"> <el-checkbox :label="item.label" v-model="item.visable"></el-checkbox></el-col>
<el-col :span="6"> <el-input-number v-model="item.width" placeholder="宽度"></el-input-number></el-col>
<el-col :span="4"> <el-checkbox v-model="item.isfix" label="固定"></el-checkbox></el-col>
<el-col :span="6"> <el-switch :span="8" v-model="item.fixlorr" active-text="固定右侧" inactive-text="固定左侧"></el-switch></el-col>
</el-row>
</div>
</transition-group>
</vuedraggable>
</div>
<div>
<span slot="footer" class="dialog-footer">
<el-button class="buttonLeft" type="primary" plain @click="recoverChecked">恢复默认</el-button>
<!-- <el-button @click="dialogVisible = false" class="buttonRight">取 消</el-button> -->
<el-button type="primary" @click="submit" class="buttonRight" >确 定</el-button>
</span>
</div>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable';
import {
getConfig, addAndUpdate } from "@/api/system/tableconfig";
export default{
name: 'configTest',
components: {
vuedraggable
},
data(){
return{
paramClounm:[], // 参数列
dialogVisible:false,
}
},
// 计算属性
computed:{
activeFields: function(){
// alert(0);
return this.fields.filter((item)=>{
return item.visible;
})
}
},
// 加载完
mounted(){
// 加载列名 ;
this.loadingTableClounm(Object.assign([],this.$parent.$parent.teacherTableClonms));
},
methods:{
getRowKey(v){
return v.id
},
// 指令之前
beforeHandleCommand(index
