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/supplierManage/supplier/index.vue | 79 +++++++++++++++++++++++++++++----------
1 files changed, 59 insertions(+), 20 deletions(-)
diff --git a/src/views/supplierManage/supplier/index.vue b/src/views/supplierManage/supplier/index.vue
index cbfb597..07c775c 100644
--- a/src/views/supplierManage/supplier/index.vue
+++ b/src/views/supplierManage/supplier/index.vue
@@ -23,6 +23,7 @@
:table-list="tableList"
@selCommonClick="selCommonClick"
@tableRowClick="tableRowClick"
+ @selTableCol="selTableCol"
>
<template slot="tableButton">
<el-table-column label="鎿嶄綔" width="100">
@@ -77,6 +78,7 @@
:table-list="productTableList"
@selCommonClick="selCommonClick"
@getSelectArray="getSelectArray"
+ @selTableCol="selProductTableCol"
>
<template slot="tableButton">
<el-table-column label="鎿嶄綔" width="170">
@@ -157,7 +159,28 @@
pageSize: 10,
totalCount: 0
},
- supplierId: 0
+ supplierId: 0,
+ showCol:['渚涘簲鍟嗙紪鍙�','渚涘簲鍟嗗悕绉�','渚涘簲鍟嗙被鍨�','鎵�灞炶涓�','鑱旂郴浜�','鑱旂郴鐢佃瘽','鐘舵��','鍒涘缓鏃堕棿'],
+ tableColumn: [
+ { label: "渚涘簲鍟嗙紪鍙�", prop: "number", min: 190, isCommonClick: true },
+ { label: "渚涘簲鍟嗗悕绉�", prop: "name", min: 130 },
+ { label: "渚涘簲鍟嗙被鍨�", prop: "supplierType", min: 130 },
+ { label: "鎵�灞炶涓�", prop: "industry", min: 130 },
+ { label: "鑱旂郴浜�", prop: "contact", min: 130 },
+ { label: "鑱旂郴鐢佃瘽", prop: "phone", min: 130 },
+ { label: "鐘舵��", prop: "status_name", min: 130 },
+ { label: "鍒涘缓鏃堕棿", prop: "created_at", min: 130 }
+ ],
+ showProductCol:['浜у搧缂栫爜','浜у搧鍚嶇О','浜у搧瑙勬牸','鍗曚綅','閲囪喘浠锋牸','渚涜揣鏃堕暱(澶�)','鐗╂祦鏃堕暱(澶�)'],
+ productColumn:[
+ { label: "浜у搧缂栫爜", prop: "number", min: 190 },
+ { label: "浜у搧鍚嶇О", prop: "name", min: 130 },
+ { label: "浜у搧瑙勬牸", prop: "specifications", min: 130 },
+ { label: "鍗曚綅", prop: "unit", min: 130 },
+ { label: "閲囪喘浠锋牸", prop: "purchasePrice", min: 130 },
+ { label: "渚涜揣鏃堕暱(澶�)", prop: "deliveryTime", min: 130 },
+ { label: "鐗╂祦鏃堕暱(澶�)", prop: "shippingDuration", min: 130 }
+ ]
}
},
created() {
@@ -166,23 +189,34 @@
this.getData()
},
methods: {
+ setColumnVisible(showCol){
+ return this.tableColumn.map(ele=>{
+ return {
+ ...ele,
+ isShowColumn:showCol.includes(ele.label)
+ }
+ })
+ },
+ setProductColumnVisible(showCol){
+ return this.productColumn.map(ele=>{
+ return {
+ ...ele,
+ isShowColumn:showCol.includes(ele.label)
+ }
+ })
+ },
setTable() {
this.tableList = {
tableInfomation: [],
selectIndex: true,
highlight: true,
ref: "tableListRef",
- tableColumn: [
- { label: "渚涘簲鍟嗙紪鍙�", prop: "number", min: 190, isCommonClick: true },
- { label: "渚涘簲鍟嗗悕绉�", prop: "name", min: 130 },
- { label: "渚涘簲鍟嗙被鍨�", prop: "supplierType", min: 130 },
- { label: "鎵�灞炶涓�", prop: "industry", min: 130 },
- { label: "鑱旂郴浜�", prop: "contact", min: 130 },
- { label: "鑱旂郴鐢佃瘽", prop: "phone", min: 130 },
- { label: "鐘舵��", prop: "status_name", min: 130 },
- { label: "鍒涘缓鏃堕棿", prop: "created_at", min: 130 }
- ]
+ 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
@@ -190,20 +224,18 @@
this.searchOptions.push({ value: value, label: label })
}
},
+ selTableCol(val) {
+ this.showcol = val;
+ this.tableList.tableColumn = this.setColumnVisible(val);
+ },
setProductTable() {
this.productTableList = {
tableInfomation: [],
selectBox: true,
selectIndex: true,
- tableColumn: [
- { label: "浜у搧缂栫爜", prop: "number", min: 190 },
- { label: "浜у搧鍚嶇О", prop: "name", min: 130 },
- { label: "浜у搧瑙勬牸", prop: "specifications", min: 130 },
- { label: "鍗曚綅", prop: "unit", min: 130 },
- { label: "閲囪喘浠锋牸", prop: "purchasePrice", min: 130 },
- { label: "渚涜揣鏃堕暱(澶�)", prop: "deliveryTime", min: 130 },
- { label: "鐗╂祦鏃堕暱(澶�)", prop: "shippingDuration", min: 130 }
- ]
+ showcol: this.showProductCol,
+ allcol: [],
+ tableColumn: this.setProductColumnVisible(this.showProductCol),
}
this.searchProductOptions = []
for (let i = 0; i < this.productTableList.tableColumn.length; i++) {
@@ -211,6 +243,13 @@
const value = this.productTableList.tableColumn[i].prop
this.searchProductOptions.push({ value: value, label: label })
}
+
+ this.productTableList.allcol = this.productTableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
+ console.log('this.productTableList',this.productTableList)
+ },
+ selProductTableCol(val) {
+ this.showProductCol = val;
+ this.productTableList.tableColumn = this.setProductColumnVisible(val);
},
// 璇锋眰鏁版嵁
getData() {
--
Gitblit v1.8.0