【若依前后端分离】el-table表格添加动态筛选列--显隐列(重新登录记忆上次选择的显隐列)

在Vue和Element UI中，可以使用el-table的column属性来实现动态筛选列的功能。以下是一个简单的例子，展示如何根据用户的选择动态地显示或隐藏表格列。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="column in dynamicColumns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :visible="column.visible">
      </el-table-column>
    </el-table>
    <el-checkbox-group v-model="checkedColumns">
      <el-checkbox v-for="column in allColumns" :key="column.prop" :label="column.prop">{{ column.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据项
      ],
      allColumns: [
        { label: '日期', prop: 'date', visible: true },
        { label: '姓名', prop: 'name', visible: true },
        { label: '地址', prop: 'address', visible: true }
      ],
      checkedColumns: ['date', 'name'] // 默认选中的列
    };
  },
  computed: {
    dynamicColumns() {
      return this.allColumns.filter(col => 
        this.checkedColumns.includes(col.prop)
      );
    }
  }
};
</script>

在这个例子中，dynamicColumns是一个计算属性，它根据checkedColumns数组动态过滤出需要显示的列。el-checkbox-group和el-checkbox组件用于提供勾选列的界面，checkedColumns存储了用户勾选的列属性。这样，用户可以动态地选择显示哪些列，而不需要重新加载页面。

为了记住用户的选择并在重新登录后恢复，可以将checkedColumns存储在本地存储（如localStorage）中，并在页面加载时读取。