3.若依前后端分离版开发用户自定义配置表格功能

一、背景

在项目上线测试的时候，关于同一个界面的表格，不同的用户会出现不同的字段排列需求，有些用户希望把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,row,command) {//alert(0);return {'index':index,'row':row,'command':command}},// 移动操作handleCommand(command) {switch(command.command) {case "search":this.search(command.index);break;case "edit":this.edit(command.index);break;case "delete":this.rowOperation(command.row.indexLine,"delete",command.row);break;case "moveTop":this.rowOperation(command.row.indexLine,"moveTop",command.row);break;case "moveUp":this.rowOperation(command.row.indexLine,"moveUp",command.row);break;case "moveDown":this.rowOperation(command.row.indexLine,"moveDown",command.row);break;case "moveBottom":this.rowOperation(command.row.indexLine,"moveBottom",command.row);break;};},// 加载表格的列loadingTableClounm(teacherTableClonms){this.paramClounm= Object.assign([],teacherTableClonms) ;},// 保存配置submit(){// alert(JSON.stringify(this.paramClounm));var objList = this.paramClounm;// 移除不需要存入数据库的属性，然后将Json存到数据库for(var i=0;i<objList.length;i++){var obj=objList[i];obj.sortNum =i; // 排序编号delete obj.ifRender;delete obj.renderFun;}// alert(JSON.stringify(objList));var inputData={tableConifgJsonStr:JSON.stringify(objList),tableKey: this.$parent.$parent.tableKey};addAndUpdate(inputData).then(res=>{this.$modal.msgSuccess("操作成功");window.location.reload();});},// 恢复默认recoverChecked(){//  this.checkedColumns=['编号','计划开始日期','计划完成日期','实际开始日期','实际完成日期'];//  this.fieldList=columnOptions;this.paramClounm= [];// 为了解决子组件改变导致父组件也跟着改变的问题this.paramClounm = Object.assign([],this.$parent.$parent.teacherTableDefaultClonms) ;  // alert(JSON.stringify(this.$parent.$parent.teacherTableDefaultClonms) );//window.location.reload();},edit(index,row){},},}</script>

3.5 前端Table界面对应table表头的配置Json

/********************************************** 功  能：teacher表列名* 创建人：cola* 创建时间:2023-08-11******************************************/
import Vue from 'vue'
const vm = new Vue()
export const 
columnOptions=
[{key:"id",label:"Id",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''},{key:"name",label:"姓名",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''},{key:"teachercode",label:"教师工号",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''},{key:"fex",label:"性别",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''},{key:"age",label:"年龄",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''},{key:"createtime",label:"创建时间",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''
},{key:"isdelete",label:"删除",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''},{key:"deletetime",label:"删除时间",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''
},
{key:"updatetime",label:"更新时间",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:true,renderFun:(scope)=>{let   html="";html+="<span>";html+=  vm.parseTime(scope.row.updatetime,'{y}-{m}-{d}');html+= "</span>"return html;}
},
{key:"updateuserid",label:"更新人",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''
},
{key:"deleteuserid",label:"删除人",visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:''
},];

3.6 前端Table界面读取配置进行动态展示

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="姓名" prop="name"><el-inputv-model="queryParams.name"placeholder="请输入姓名"[e-mail]="handleQuery"/></el-form-item><el-form-item label="教师工号" prop="teachercode"><el-inputv-model="queryParams.teachercode"placeholder="请输入教师工号"[e-mail]="handleQuery"/></el-form-item><el-form-item label="性别 0 女 1男" prop="fex"><el-inputv-model="queryParams.fex"placeholder="请输入性别 0 女 1男"[e-mail]="handleQuery"/></el-form-item><el-form-item label="年龄" prop="age"><el-inputv-model="queryParams.age"placeholder="请输入年龄"[e-mail]="handleQuery"/></el-form-item><el-form-item label="是否删除" prop="isdelete"><el-inputv-model="queryParams.isdelete"placeholder="请输入是否删除"[e-mail]="handleQuery"/></el-form-item><el-form-item label="创建时间" prop="createtime"><el-date-picker clearablev-model="queryParams.createtime"type="date"value-format="yyyy-MM-dd"placeholder="请选择创建时间"></el-date-picker></el-form-item><el-form-item label="更新时间" prop="updatetime"><el-inputv-model="queryParams.updatetime"placeholder="请输入更新时间"[e-mail]="handleQuery"/></el-form-item><el-form-item label="删除时间" prop="deletetime"><el-date-picker clearablev-model="queryParams.deletetime"type="date"value-format="yyyy-MM-dd"placeholder="请选择删除时间"></el-date-picker></el-form-item><el-form-item label="创建人id" prop="createuserid"><el-inputv-model="queryParams.createuserid"placeholder="请输入创建人id"[e-mail]="handleQuery"/></el-form-item><el-form-item label="修改人id" prop="updateuserid"><el-inputv-model="queryParams.updateuserid"placeholder="请输入修改人id"[e-mail]="handleQuery"/></el-form-item><el-form-item label="删除人id" prop="deleteuserid"><el-inputv-model="queryParams.deleteuserid"placeholder="请输入删除人id"[e-mail]="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleAdd">新增</el-button></el-col><el-col :span="1.5"><el-buttontype="success"plainicon="el-icon-edit"size="mini":disabled="single"@click="handleUpdate">修改</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="el-icon-delete"size="mini":disabled="multiple"@click="handleDelete">删除</el-button></el-col><el-col :span="1.5"><el-buttontype="warning"plainicon="el-icon-download"size="mini"@click="handleExport">导出</el-button></el-col><el-col :span="1.5"><el-buttontype="warning"plainicon="el-icon-download"size="mini"@click="openconifg">配置</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><!-- :data="teacherList" v-loading="loading"  :fixed="item.fixlorr==0? 'left':'right'"--><el-table :data="teacherList" v-loading="loading"   @selection-change="handleSelectionChange"  style="width: 400"><!-- <el-table-column type="selection" width="55" align="center"  :fixed="true" /> <template slot-name=''></template></el-table-column> --><el-table-column   v-for="item in this.teacherTableClonms " :key="item.key" :label="item.label"  :prop="item.key" :width="item.width" v-if="item.ifRender && item.visable" :fixed="item.isfix?item.fixlorr==0?left:right :false"><template slot-scope="scope" ><div  v-html="item.renderFun? item.renderFun(scope) : ''"></div></template></el-table-column><el-table-column :label="item.label" align="center" :prop="item.key" :width="item.width"  v-else-if="item.ifRender==false && item.visable" :fixed="item.isfix?item.fixlorr==0?'left':'right' :false" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" ><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)">修改</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)">删除</el-button></template></el-table-column><!-- <el-table-column label="id" align="center" prop="id" /><el-table-column label="姓名" align="center" prop="name" /><el-table-column label="教师工号" align="center" prop="teachercode" /><el-table-column label="性别 0 女 1男" align="center" prop="fex" /><el-table-column label="年龄" align="center" prop="age" /><el-table-column label="是否删除" align="center" prop="isdelete" /><el-table-column label="创建时间" align="center" prop="createtime" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.createtime, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="更新时间" align="center" prop="updatetime" /><el-table-column label="删除时间" align="center" prop="deletetime" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.deletetime, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column  label="创建人id" align="center" prop="createuserid" /><el-table-column label="修改人id" align="center" prop="updateuserid" /><el-table-column label="删除人id" align="center" prop="deleteuserid" />--></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><!-- 添加或修改测试_教师对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" placeholder="请输入姓名" /></el-form-item><el-form-item label="教师工号" prop="teachercode"><el-input v-model="form.teachercode" placeholder="请输入教师工号" /></el-form-item><el-form-item label="性别 0 女 1男" prop="fex"><el-input v-model="form.fex" placeholder="请输入性别 0 女 1男" /></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="form.age" placeholder="请输入年龄" /></el-form-item><el-form-item label="是否删除" prop="isdelete"><el-input v-model="form.isdelete" placeholder="请输入是否删除" /></el-form-item><el-form-item label="删除时间" prop="deletetime"><el-date-picker clearablev-model="form.deletetime"type="date"value-format="yyyy-MM-dd"placeholder="请选择删除时间"></el-date-picker></el-form-item><el-form-item label="创建人id" prop="createuserid"><el-input v-model="form.createuserid" placeholder="请输入创建人id" /></el-form-item><el-form-item label="修改人id" prop="updateuserid"><el-input v-model="form.updateuserid" placeholder="请输入修改人id" /></el-form-item><el-form-item label="删除人id" prop="deleteuserid"><el-input v-model="form.deleteuserid" placeholder="请输入删除人id" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog><!-- 传入 参数--><el-dialog  title="配置表格列" :visible.sync="cofigshow" width="900px" append-to-body><ConfigTableTest :tableclounms="this.teacherTableClonms"></ConfigTableTest></el-dialog> </div>
</template><script>
import { listTeacher, getTeacher, delTeacher, addTeacher, updateTeacher } from "@/api/system/teacher";
import { getTableConfigByUserCodeAndTabelKey } from "@/api/system/tableconfig";
import  { columnOptions }  from "../../../tableclounm/teacherclounm";import ConfigTableTest from "../tableconfig/configtabletest.vue";import TableCloumRender from "../tableconfig/tableclounmrender.vue";
export default {name: "Teacher",components: {ConfigTableTest,TableCloumRender
},data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 测试_教师表格数据teacherList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,// 配置显示层cofigshow: false,// 表格的Key，用来自定义配置的标识 to do 命名规范定义 功能模_块功能界面_Table ?tableKey:'TeacherIndexTable',// 查询参数queryParams: {pageNum: 1,pageSize: 10,name: null,teachercode: null,fex: null,age: null,isdelete: null,createtime: null,updatetime: null,deletetime: null,createuserid: null,updateuserid: null,deleteuserid: null},// 表单参数form: {},// 表单校验rules: {},teacherTableClonms : [], // 获取后端返回的当前用户个性化配置的列名teacherTableDefaultClonms:[] //  获取js里面配置的列名};},created() {this.getTableConfig(); // 获取用户列表配置// alert(JSON.stringify(this.teacherTableClonms) );this.getList();},methods: {/** 查询测试_教师列表 */getList() {this.loading = true;listTeacher(this.queryParams).then(response => {this.teacherList = response.rows;this.total = response.total;this.loading = false;});},// 获取当前用户这个列表对应的配置:// 逻辑：// 1.先查询配置。// 2.如果这个用户还没配置 则取JS里面的默认配置。// 3.如果这个用户已经配置了，则取数据库里面保存的配置，然后循环比对存在js里面的字段，// 生成最后对应的配置（因为数据库里面没有存渲染的代码，考虑到字段的长度限制 8000 风险点 1 如果大宽表，需要修改数据库字段类型）。getTableConfig(){// 默认的配置 Object.assign防止  this.teacherTableDefaultClonms的变动影响columnOptionsthis.teacherTableDefaultClonms =  JSON.parse(JSON.stringify(columnOptions))  ; // alert(JSON.stringify(this.teacherTableDefaultClonms ));var param={tableKey:this.tableKey  // 表格的key 每个表格唯一};// 默认的配置 Object.assign防止  jsConfigClounms的变动影响columnOptionslet  jsConfigClounms =   Object.assign([],columnOptions); let  newClounms =[]; // 拼接成新的一个配置数组getTableConfigByUserCodeAndTabelKey(param).then(res=>{if(!!res){var data =JSON.parse(res.tableConifgJsonStr) ;// 以配置在JS里面的配置为循环的基础（需要考虑到增减字段）for(var  i=0;i<jsConfigClounms.length;i++){var jsClounmItem = jsConfigClounms[i];var newItem = jsClounmItem; // 新的项以JS的配置为基础,能设置的配置项取数据库里面的// 查询对应的配置// rfor(var j=0;j<data.length;j++){var dataItem = data[j];if(newItem.key == dataItem.key){// 说明匹配上了if(dataItem.visable!=null){newItem.visable = dataItem.visable; // 是否显示}if(dataItem.width!=null){newItem.width = dataItem.width;   // 宽度}if(dataItem.isfix!=null){newItem.isfix = dataItem.isfix;     // 是否固定}if(dataItem.fixlorr!=null){newItem.fixlorr = dataItem.fixlorr; // 固定左边or右边}if(dataItem.sortNum!=null){newItem.sortNum = dataItem.sortNum ; //排序编号}break; // 匹配上了，跳出一层循环} else{// 没有匹配上，则说明是新加的字段，把这些新加的字段放在最后newItem.sortNum = 10000-i; // 把排序号增加到最大} } // for 1 endnewClounms.push(newItem);}// for2 end// 这个时候需要排序一下，恢复顺序newClounms = newClounms.sort(this.sortByNum);}else{// 说明数据库里面没有配置，则直接取JS里面的配置newClounms = jsConfigClounms;}this.teacherTableClonms = newClounms;// alert(JSON.stringify(this.teacherTableDefaultClonms ));});},// 根据排序编码号进行排序
sortByNum(a, b) {return a.sortNum - b.sortNum;
},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {id: null,name: null,teachercode: null,fex: null,age: null,isdelete: null,createtime: null,updatetime: null,deletetime: null,createuserid: null,updateuserid: null,deleteuserid: null};this.resetForm("form");},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.id)this.single = selection.length!==1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加测试_教师";},/** 修改按钮操作 */handleUpdate(row) {this.reset();const id = row.id || this.idsgetTeacher(id).then(response => {this.form = response.data;this.open = true;this.title = "修改测试_教师";});},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.id != null) {updateTeacher(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();//});} else {addTeacher(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const ids = row.id || this.ids;this.$modal.confirm('是否确认删除测试_教师编号为"' + ids + '"的数据项？').then(function() {return delTeacher(ids);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => {});},/** 导出按钮操作 */handleExport() {this.download('system/teacher/export', {...this.queryParams}, `teacher_${new Date().getTime()}.xlsx`)},/**打开配置 */openconifg(){this.cofigshow = true;}}
};
</script>

3.7 功能完成