首页 VueJS table表格动态筛选列显示

table表格动态筛选列显示

作者:胡同里的砖头 围观群众:63 更新于:2025-07-23

筛选 按钮

 <el-popover placement="bottom" :width="100" trigger="click">
<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>
JSON配置(config/tableColumn.vue):
export const chartColumns = [
{ 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 },
];
table的列添加v-if属性
<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】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8