<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中的数据：
colData: [
{ title: "订单ID", istrue: true },
{ title: "订单编号", istrue: true },
{ title: "客户厂商", istrue: true },
{ title: "产品名称", istrue: true },
{ title: "联系人", istrue: true },
{ title: "负责人", istrue: true },
{ title: "下单时间", istrue: true },
{ title: "发票号码", istrue: true },
{ title: "开票时间", istrue: true },
{ title: "项目进度", istrue: true },
{ title: "采购员", istrue: true },
{ title: "产品单位", istrue: true },
{ title: "产品数量", istrue: true },
{ title: "未税", istrue: true },
{ title: "含税单价", istrue: true },
{ title: "营业额", istrue: true },
{ title: "交货状态", istrue: true },
{ title: "验收状态", istrue: true },
{ title: "订单状态", istrue: true },
{ title: "完成时间", istrue: true },
],
// 多选框的列表，列出表格的每一列
checkBoxGroup: ["订单ID", "订单编号", "客户厂商", "产品名称", "联系人", "负责人", "下单时间", "发票号码","开票时间","项目进度","采购员","产品单位","产品数量","未税","含税单价","营业额","交货状态","验收状态","订单状态","完成时间"],
// 当前选中的多选框，代表当前展示的列
checkedColumns: ["订单ID", "订单编号", "客户厂商", "产品名称", "联系人", "负责人", "下单时间", "发票号码","开票时间","项目进度","采购员","产品单位","产品数量","未税","含税单价","营业额","交货状态","验收状态","订单状态","完成时间"],
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 就欧克了
