一、背景
在项目上线测试的时候，关于同一个界面的表格，不同的用户会出现不同的字段排列需求，有些用户希望把A字段排在最前面，有些用户则希望A字段不显示。针对这种情况，开发一个表格自定义配置的功能，每个用户根据自己的需求自己去设定表单字段的显示、隐藏、字段的宽度、左右固定等。
二、效果图
1.配置界面，可以拖动字段的顺序，是否显示、宽度、左右固定
三、实现方式
3.1 整体实现思路
将前端表格配置好的字段方式的Json存到数据库，用户打开界面的时候去数据库读取这个配置，前端用循环动态的渲染elemnet-table的表头即可。如果这个用户没有配置过，则读取默认的配置，默认配置写在前端一个JSON里面，每个vue界面的table设置一个table key用来标识table列表，数据库层面查找的时候根据用户code和tablekey来找到这个用户关于这个表格的配置。
最后’在前端进行动态渲染表头即可。整个功能的重点在于前端动态的拿到后端的json跟默认的存在前端的Json进行比较，然后生成最终的一个配置的json（注意：要以前端的默认Json为准，因为要考虑到字段的新增和删除的情况）文章来源：https://www.toymoban.com/news/detail-655147.html
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-input
v-model="queryParams.name"
placeholder="请输入姓名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="教师工号" prop="teachercode">
<el-input
v-model="queryParams.teachercode"
placeholder="请输入教师工号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="性别 0 女 1男" prop="fex">
<el-input
v-model="queryParams.fex"
placeholder="请输入性别 0 女 1男"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input
v-model="queryParams.age"
placeholder="请输入年龄"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="是否删除" prop="isdelete">
<el-input
v-model="queryParams.isdelete"
placeholder="请输入是否删除"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createtime">
<el-date-picker clearable
v-model="queryParams.createtime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择创建时间">
</el-date-picker>
</el-form-item>
<el-form-item label="更新时间" prop="updatetime">
<el-input
v-model="queryParams.updatetime"
placeholder="请输入更新时间"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="删除时间" prop="deletetime">
<el-date-picker clearable
v-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-input
v-model="queryParams.createuserid"
placeholder="请输入创建人id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="修改人id" prop="updateuserid">
<el-input
v-model="queryParams.updateuserid"
placeholder="请输入修改人id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="删除人id" prop="deleteuserid">
<el-input
v-model="queryParams.deleteuserid"
placeholder="请输入删除人id"
clearable
@keyup.enter.native="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-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="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-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="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>
<pagination
v-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 clearable
v-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的变动影响columnOptions
this.teacherTableDefaultClonms = JSON.parse(JSON.stringify(columnOptions)) ;
// alert(JSON.stringify(this.teacherTableDefaultClonms ));
var param={
tableKey:this.tableKey // 表格的key 每个表格唯一
};
// 默认的配置 Object.assign防止 jsConfigClounms的变动影响columnOptions
let 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的配置为基础,能设置的配置项取数据库里面的
// 查询对应的配置
// r
for(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 end
newClounms.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!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加测试_教师";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getTeacher(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 功能完成
文章来源地址https://www.toymoban.com/news/detail-655147.html
到了这里，关于3.若依前后端分离版开发用户自定义配置表格功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
