需求：table表格列的显隐功能

效果图：

描述： 根据select all 树形图的勾选/取消勾选来控制el-table表格的显示、隐藏功能

列名配置代码 ts/data.ts：

export default {
    columns: [
      {
        name: "Year",
        key: "year",
      },
      {
        name: "Journal",
        key: "journal",
      },
      {
        name: "Topic Section",
        key: "topicSection",
      },
      {
        name: "Target Topic",
        key: "targetTopic",
      },
      {
        name: "Target",
        key: "target",
      },
      {
        name: "Completed",
        key: "completed",
      },
  
      {
        name: "SI Title",
        key: "siTitle",
      },
      {
        name: "GE Name",
        key: "geName",
      },
      {
        name: "Country/Region",
        key: "country/region",
      },
      {
        name: "Affiliation",
        key: "affiliation",
      },
      {
        name: "SI Association Time",
        key: "siAssociationTime",
      },
      {
        name: "A",
        key: "A",
      },
  
      {
        name: "R",
        key: "R",
      },
  
      {
        name: "Submission Deadline",
        key: "submissionDeadline",
      },
     
 
    ],
    allDatas: [
      "year",
      "journal",
      "topicSection",
      "targetTopic",
      "target",
      "completed",
      "siTitle",
      "geName",
      "country/region",
      "affiliation",
      "siAssociationTime",
      "A",
      "R",
      "submissionDeadline"
    ],
  };
  

页面、逻辑代码 table.vue：

<el-popover
              :visible="visible"
              placement="bottom"
              :width="250"
              style="height: 200px"
            >
              <el-tree
                :data="columns"
                show-checkbox
                node-key="key"
                :default-checked-keys="defaultChecked"
                ref="tree"
                :props="defaultProps"
                @check="handleCheckChange"
                style="max-height: 450px; overflow-y: auto; overflow-x: hidden"
              />
              <template #reference>
                <el-button-group class="mr-4" style="margin-right: 12px;">
                  <el-button
                    @click="selectBtn()"
                    class="el-popover-btn-left"
                    type="primary"
                    >Select All</el-button
                  >
                  <el-button
                    class="el-popover-btn"
                    type="primary"
                    @click="visible = true"
                    icon="Setting"
                  ></el-button>
                </el-button-group>
              </template>
            </el-popover>
 ===============================================================           
   <el-table
          :data="tableData"
          border
          :span-method="spanMethod"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          v-loading="isLoading"
        >

          <template v-if="checkColumns.indexOf('year') > -1">
            <el-table-column label="Year" prop="annual" width="60">
            </el-table-column>
          </template>
          <template v-if="checkColumns.indexOf('journal') > -1">
            <el-table-column label="Journal" prop="journal" width="90">
            </el-table-column>
          </template>
          <template v-if="checkColumns.indexOf('topicSection') > -1">
            <el-table-column
              label="Topic Section"
              prop="categoryName"
              show-overflow-tooltip
            >
            <template #header>
                <el-tooltip content="Topic Section">
                  <span>Topic<br />Section</span>
                </el-tooltip>
              </template>
            </el-table-column>
          </template>
        
        ......
        
          <el-table-column
            label="Action"
            prop="action"
            width="120"
            v-if="canOperation"
          >
            <template #default="scope">
              <template v-if="!scope.row.del">
                <el-button type="text" @click="editAction(scope.row.id)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                </el-button>

                <el-button type="text" @click="deleteAction(scope.row.id)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </template>

              <template v-if="scope.row.top">
                <el-button
                  @click="setTopUp(scope.row)"
                  type="primary"
                  link
                  title="Unpin"
                >
                  <svg-icon icon-class="downTop" title="pin to top" />
                </el-button>
              </template>
              <template v-else>
                <el-button
                  @click="setTopUp(scope.row)"
                  type="primary"
                  link
                  title="pin to top"
                >
                  <svg-icon icon-class="upTop" />
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>

import datas from "./ts/data.ts";
let columns = datas.columns;
let allColumns = datas.allDatas;
let checkColumns = ref<any>([]);
const defaultChecked = ref(["year", "journal", "topicSection", "targetTopic"]);

onMounted(() => {
  getFavouriteTableFieldsDatas();
  checkColumns.value = defaultChecked.value;
});

const tableKey = ref(1);
const tree = ref();
const selectBtn = () => {
  columns.map(function (items, key) {
    if (checkColumns.value.indexOf(items.key) === -1) {
      checkColumns.value.push(items.key);
    }
  });
  saveFavouriteTableFields({
    tableFields: checkColumns.value,
    tableName: "topicManagement",
  }).then((res) => {});
  tree.value!.setCheckedKeys(checkColumns.value, false);
};
const getFavouriteTableFieldsDatas = () => {
  getFavouriteTableFields({ tableName: "topicManagement" }).then(
    (res) => {
      if (res.data.tableFields.length > 0) {
        checkColumns.value = res.data.tableFields;
        tree.value!.setCheckedKeys(res.data.tableFields);
      } else {
        checkColumns.value = allColumns;
        tree.value!.setCheckedKeys(allColumns);
      }
    }
  );
};
const defaultProps = {
  children: "children",
  label: "name",
};
const handleCheckChange = (data, checked, indeterminate) => {
  checkColumns.value = checked.checkedKeys;
  saveFavouriteTableFields({
    tableFields: checkColumns.value,
    tableName: "topicManagement",
  }).then((res) => {});
  tableKey.value = Math.random();
};

getFavouriteTableFields接口，参数：tableName=topicManagement

saveFavouriteTableFields接口