文章目录

• 效果图
• 代码

效果图

代码

data定义

gridOptions: {   id: 'full_edit_1', //storage需要   keepSource: true,//编辑状态下的还原需要   border: true,   loading: false,   align: "center",   stripe: true,   printConfig: {},   exportConfig: {},   rowConfig: {     isHover: true//高亮显示   },   formConfig: {     titleWidth: 80,     titleAlign: 'right',     items: [],     data: {}   },   columnConfig: {     resizable: true //是否启用列宽调整   },   customConfig: {     storage: true, //是否启用 localStorage 本地保存     immediate: true,     showFooter: false   },   toolbarConfig: {     refresh: {queryMethod: this.handleQuery},     slots: {       buttons: 'toolbar_buttons'//自定义工具栏按钮     }   },   editConfig: {     trigger: 'dblclick',     enabled: true,     mode: 'row',     showStatus: true //只对 keep-source 开启有效，是否显示单元格新增与修改状态   },   sortConfig: {     trigger: 'cell',//触发方式     remote: true //所有列是否使用服务端排序，如果设置为 true 则不会对数据进行处理   },   filterConfig: {     remote: true   },   //右击菜单   menuConfig: {     body: {}   },   importConfig: {     remote: true,     importMethod: this.importMethod,     types: ['xlsx'],     modes: ['insert']   },   checkboxConfig: {     labelField: '',     reserve: true,     highlight: true,     range: true   },   //列   columns: [],   //较验规则   editRules: {},   data: [] } 

created() {    this.gridOptions.menuConfig.body = constant.menuConfig;    this.getColumns();//请求tableConfig配置项数据    this.priceJustStatic()  }, methods: {     getColumns() {       this.gridOptions.loading = true       getInfoByBusiCode("请求配置项数据").then(res => {         if (res.code === 200) {           this.gridOptions.columns = JSON.parse(res.data.columns);           this.gridOptions.formConfig.items = JSON.parse(res.data.formConfig);           this.gridOptions.editRules = JSON.parse(res.data.rules);           this.handleQuery();         } else {           this.gridOptions.loading = false;           this.$modal.msgError("获取表数据失败，请重试");         }       });     },     getList() { //获取table列表数据       this.gridOptions.loading = true       const params = {         pageNum: this.pageNum,         pageSize: this.pageSize,         form: this.gridOptions.formConfig.data //获取from搜索条件数据       }       getInfoList(params).then(res => {         this.gridOptions.loading = false;         if (res.code === 200) {           this.gridOptions.data = res.rows;           this.total = res.total;         }       })     }, 	 handleQuery() {       this.pageNum = 1;       this.getList();     }, } 

//from 配置 [{ 	"field": "pId", 	"title": "标题", 	"span": 8, 	"itemRender": {}, 	"slots": { 		"default": "pId" 	} }, { 	"field": "billCode", 	"title": "单据号", 	"span": 8, 	"itemRender": { 		"name": "VxeInput", 		"props": { 			"placeholder": "请输入单据号" 		} 	} }, { 	"field": "sType", 	"title": "标题", 	"span": 8, 	"folding": true, //开启折叠 	"itemRender": {}, 	"slots": { 		"default": "sType" 	} }, { 	"field": "Time", 	"title": "日期", 	"span": 12, 	"folding": true,//开启折叠 	"itemRender": {}, 	"slots": { 		"default": "Time" 	} }, { 	"span": 24, 	"align": "center", 	"collapseNode": true,//折叠终止 	"itemRender": {}, 	"slots": { 		"default": "fromButton" 	} }] 

//table 配置 [{ 	"type": "checkbox", 	"width": "50", 	"fixed": "left" }, { 	"type": "seq", 	"title": "序号", 	"visible": true, 	"width": "80" }, { 	"field": "id", 	"title": "ID", 	"visible": false, 	"width": "60", 	"fixed": "left" }, { 	"field": "remark", 	"title": "备注", 	"visible": true, 	"width": "80", 	"slots": { 		"default": "remark" 	} }, { 	"title": "操作", 	"width": "150", 	"fixed": "right", 	"slots": { 		"default": "operate" 	} }]