<el-col :span="4">
<el-popover placement="bottom" title="篩選列" trigger="click" width="40">
<el-checkbox-group v-model="checkedColumns" size="mini">
<el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
</el-checkbox-group>
<div title="篩選列" class="filter-table-col" slot="reference"><i class="el-icon-c-scale-to-original"></i></div>
</el-popover>
</el-col>
date中的數(shù)據(jù)：
colData: [
{ title: "訂單ID", istrue: true },
{ title: "訂單編號", istrue: true },
{ title: "客戶廠商", istrue: true },
{ title: "產品名稱", istrue: true },
{ title: "聯(lián)系人", istrue: true },
{ title: "負責人", istrue: true },
{ title: "下單時間", istrue: true },
{ title: "發(fā)票號碼", istrue: true },
{ title: "開票時間", istrue: true },
{ title: "項目進度", istrue: true },
{ title: "采購員", istrue: true },
{ title: "產品單位", istrue: true },
{ title: "產品數(shù)量", istrue: true },
{ title: "未稅", istrue: true },
{ title: "含稅單價", istrue: true },
{ title: "營業(yè)額", istrue: true },
{ title: "交貨狀態(tài)", istrue: true },
{ title: "驗收狀態(tài)", istrue: true },
{ title: "訂單狀態(tài)", istrue: true },
{ title: "完成時間", istrue: true },
],
// 多選框的列表，列出表格的每一列
checkBoxGroup: ["訂單ID", "訂單編號", "客戶廠商", "產品名稱", "聯(lián)系人", "負責人", "下單時間", "發(fā)票號碼","開票時間","項目進度","采購員","產品單位","產品數(shù)量","未稅","含稅單價","營業(yè)額","交貨狀態(tài)","驗收狀態(tài)","訂單狀態(tài)","完成時間"],
// 當前選中的多選框蝠检，代表當前展示的列
checkedColumns: ["訂單ID", "訂單編號", "客戶廠商", "產品名稱", "聯(lián)系人", "負責人", "下單時間", "發(fā)票號碼","開票時間","項目進度","采購員","產品單位","產品數(shù)量","未稅","含稅單價","營業(yè)額","交貨狀態(tài)","驗收狀態(tài)","訂單狀態(tài)","完成時間"],
watch: {
checkedColumns(val) {
let arr = this.checkBoxGroup.filter(i => !val.includes(i));
this.colData.filter(i => {
if (arr.indexOf(i.title) != -1) {
i.istrue = false;
} else {
i.istrue = true;
}
});
this.reload = Math.random()
}
},
有點亂總結一下：
第一步加上<el-col 這個按鈕 上面有復制一下就行
第二步在data中加上colData
第三步也是在data中加上checkBoxGroup和checkedColumns
最后一步加上顯示watch 就歐克了
