筛选 按钮
<el-popover placement="bottom" :width="100" trigger="click">JSON配置(config/tableColumn.vue):
<template #reference>
<el-button style="margin-right: 16px">筛选</el-button>
</template>
<el-checkbox-group v-model="selectedColumns">
<el-checkbox
v-for="column in columnOptions"
:key="column.prop"
:label="column.prop"
:disabled="column.required"
>
{{ column.label }}
</el-checkbox>
</el-checkbox-group>
</el-popover>
export const chartColumns = [table的列添加v-if属性
{ prop: "fab", label: "Fab", show: true, required: true },
{ prop: "line", label: "Line", show: true, required: true },
{ prop: "system", label: "System", show: true, required: true },
{ prop: "area", label: "Area", show: true, required: true },
{ prop: "sampling_point", label: "Sampling Point", show: true, required: true },
{ prop: "tank", label: "Tank", show: true, required: true },
{ prop: "chart", label: "Chart", show: true, required: true },
{ prop: "ucl", label: "UCL", show: true, required: true },
{ prop: "lcl", label: "LCL", show: true, required: true },
{ prop: "usl", label: "USL", show: true, required: true },
{ prop: "lsl", label: "LSL", show: true, required: true },
{ prop: "detectlimit", label: "Detect Limit", show: true },
{ prop: "unit", label: "Unit", show: true },
{ prop: "i_eda_system", label: "EDA System", show: true },
{ prop: "i_eda_tagname", label: "EDA Tag Name", show: true },
{ prop: "memo", label: "Memo", show: true },
{ prop: "update_time", label: "Update Time", show: true },
];
<el-table-column添加引用
prop="fab"
label="Fab"
v-if="selectedColumns.includes('fab')"
show-overflow-tooltip
/>
<el-table-column
prop="line"
label="Line"
v-if="selectedColumns.includes('line')"
show-overflow-tooltip
/>
import { chartColumns } from "@/config/tableColumns";添加代码:
const columnOptions = ref(chartColumns);实现效果:
const selectedColumns = ref(
JSON.parse(localStorage.getItem("chartColumns")) ||
columnOptions.value.filter((col) => col.show).map((col) => col.prop)
);
watch(
selectedColumns,
(newVal) => {
localStorage.setItem("chartColumns", JSON.stringify(newVal));
},
{ deep: true }
);
- 本文标题: table表格动态筛选列显示
- 文章分类:【VueJS】
- 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
- 上一篇:遍历json所有list进行赋值
- 下一篇: WPF的父页面如何向子页面传值