筛选 按钮

<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"
                >
                  {{ column.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-popover>

<el-table-column
            label="编号"
            align="center"
            prop="a_Id"
            v-if="selectedColumns.includes('a_Id')"
            width="80"
          />

const columnOptions = ref([
  { prop: "a_Id", label: "编号" },
  { prop: "a_Login", label: "用户名" },
  { prop: "a_Name", label: "用户昵称" },
  { prop: "a_SexText", label: "性别" },
  { prop: "a_Age", label: "年龄" },
  { prop: "a_Tel", label: "手机号码" },
  { prop: "a_Count", label: "登录次数" },
  { prop: "role.r_RoleName", label: "角色" },
  { prop: "a_EndTime", label: "最后登录" },
]);

const selectedColumns = ref(
  JSON.parse(localStorage.getItem("selectedColumns")) ||
    columnOptions.value.map((col) => col.prop)
);

watch(
  selectedColumns,
  (newVal) => {
    localStorage.setItem("selectedColumns", JSON.stringify(newVal));
  },
  { deep: true }
);

• 本文标题： table表格动态筛选列显示
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：Vue如何实现内容超出高度，显示展开按钮展示全文