el-table 表格筛选，展示/隐藏列

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column
          fixed
          type="index"
          align="center"
          :index="1">
        <template #header>
          <i class="icon icon20 icon-search" @click="visible = true"></i>
        </template>
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
          width="150"
          v-if="showColumn.date"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="120"
          v-if="showColumn.name"
      >
      </el-table-column>
      <el-table-column
          prop="province"
          label="省份"
          width="120"
          v-if="showColumn.provinces"
      >
      </el-table-column>
      <el-table-column
          prop="city"
          label="市区"
          width="120"
          v-if="showColumn.city"
      >
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址"
          minWidth="300"
          v-if="showColumn.adreess"
      >
      </el-table-column>
      <el-table-column
          prop="zip"
          label="邮编"
          width="120"
          v-if="showColumn.zipCode"
      >
      </el-table-column>
    </el-table>
    <el-dialog title="字段配置" v-model="visible">
      <transition name="fade">
        <div>
          <div>选择显示字段</div>
          <div>
            <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
            <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
            <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
            <el-checkbox v-model="showColumn.city">市区</el-checkbox>
            <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
            <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
          </div>
        </div>
      </transition>
      <template #footer>
            <span class="dialog-footer">
              <el-button @click="visible = false">取 消</el-button>
              <el-button type="primary" @click="saveColumn">确 定</el-button>
            </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {computed, ref, watch, onMounted,reactive} from 'vue'
export default {

  setup(){
    const visible = ref(false)
    const tableData = ref(
        [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1517 弄",
            zip: 200333,
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1519 弄",
            zip: 200333,
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1516 弄",
            zip: 200333,
          }
        ]
    )

    const showColumn =reactive({
          date: true,
          name: true,
          provinces: true,
          city: true,
          adreess: true,
          zipCode: true,
    })

    const toggleVisible = () => {
      visible.value = !visible.value;
    };

    const handleClick = (row) => {
      console.log(row);
    };

    const saveColumn = () => {
      localStorage.setItem("columnSet", JSON.stringify(showColumn));
      visible.value = false;
    };

    onMounted(()=>{
      // 发请求得到showColumnInitData的列的名字
      if (localStorage.getItem("columnSet")) {
        Object.assign(showColumn, JSON.parse(localStorage.getItem("columnSet")));
      }
    })

    return{
      visible,
      tableData,
      showColumn,
      toggleVisible,
      handleClick,
      saveColumn,
    }
  }
};
</script>

<style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>