From 7f0ec738a0af4d9d334ce85012f864f2519ebb3f Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期六, 23 九月 2023 13:32:24 +0800 Subject: [PATCH] feat: 表格组件新增表头配置组件, 各列表页适配此组件 --- src/views/productManage/product/index.vue | 51 +++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/views/productManage/product/index.vue b/src/views/productManage/product/index.vue index ac53129..7ea3200 100644 --- a/src/views/productManage/product/index.vue +++ b/src/views/productManage/product/index.vue @@ -26,7 +26,12 @@ <div class="body"> <div class="body-card"> <div class="list-view"> - <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick"> + <TableCommonView + ref="tableListRef" + :table-list="tableList" + @selCommonClick="selCommonClick" + @selTableCol="selTableCol" + > <!-- <template slot="tableButton"> <el-table-column label="鎿嶄綔" width="120"> <template slot-scope="scope"> @@ -76,7 +81,20 @@ visible: false, title: "鏂板缓", infomation: {} - } + }, + tableColumn: [ + { label: "浜у搧缂栫爜", prop: "number", min: 190, isCommonClick: true }, + { label: "浜у搧鍚嶇О", prop: "name", min: 130 }, + { label: "渚涘簲鍟�", prop: "supplierName", min: 130 }, + { label: "浜у搧绫诲埆", prop: "productType", min: 130 }, + { label: "瑙勬牸", prop: "specifications", min: 130 }, + { label: "鍨嬪彿", prop: "modelNumber", min: 130 }, + { label: "鍗曚綅", prop: "unit", min: 60 }, + { label: "浠锋牸", prop: "purchasePrice", min: 130 }, + { label: "鏈�浣庡簱瀛�", prop: "minimumStock", min: 80 }, + { label: "鏈�楂樺簱瀛�", prop: "maximumStock", min: 80 } + ], + showCol: ['浜у搧缂栫爜', '浜у搧鍚嶇О', '渚涘簲鍟�', '浜у搧绫诲埆', '瑙勬牸', '鍨嬪彿', '鍗曚綅', '浠锋牸', '鏈�浣庡簱瀛�', '鏈�楂樺簱瀛�'] } }, created() { @@ -84,23 +102,24 @@ this.getData() }, methods: { + setColumnVisible(showCol){ + return this.tableColumn.map(ele=>{ + return { + ...ele, + isShowColumn:showCol.includes(ele.label) + } + }) + }, setTable() { this.tableList = { tableInfomation: [], selectIndex: true, - tableColumn: [ - { label: "浜у搧缂栫爜", prop: "number", min: 190, isCommonClick: true }, - { label: "浜у搧鍚嶇О", prop: "name", min: 130 }, - { label: "渚涘簲鍟�", prop: "supplierName", min: 130 }, - { label: "浜у搧绫诲埆", prop: "productType", min: 130 }, - { label: "瑙勬牸", prop: "specifications", min: 130 }, - { label: "鍨嬪彿", prop: "modelNumber", min: 130 }, - { label: "鍗曚綅", prop: "unit", min: 60 }, - { label: "浠锋牸", prop: "purchasePrice", min: 130 }, - { label: "鏈�浣庡簱瀛�", prop: "minimumStock", min: 80 }, - { label: "鏈�楂樺簱瀛�", prop: "maximumStock", min: 80 } - ] + showcol: this.showCol, + allcol: [], + tableColumn:this.setColumnVisible(this.showCol) } + this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label); + this.searchOptions = [] for (let i = 0; i < this.tableList.tableColumn.length; i++) { const label = this.tableList.tableColumn[i].label @@ -108,6 +127,10 @@ this.searchOptions.push({ value: value, label: label }) } }, + selTableCol(val) { + this.showcol = val; + this.tableList.tableColumn = this.setColumnVisible(val); + }, // 璇锋眰鏁版嵁 async getData() { await getProductList({ -- Gitblit v1.8.0