动态显示和隐藏列的 Vue 组件 — 让你的表格“变身”！

动态显示和隐藏列的 el-table-column组件！

在这个数字化的时代，大家都在追求个性化和灵活性。尤其是在表格中，列的显示和隐藏就是一种精髓。那么，如何做到这一点呢？今天就来聊聊如何使用 Vue 和 Element UI 的 el-table 组件，打造一个动态显示和隐藏列的组件，让你的表格也能变得活灵活现。

组件的基本结构

先来看看组件的基本结构，整个功能的核心就是一个树形选择器，可以选择哪些列需要显示。代码如下：

<template>
  <div>
    <el-button size="mini" type="primary" @click="selectAll">全选</el-button>
    <el-button size="mini" type="primary" @click="selectNo">全不选</el-button>
    <el-button size="mini" type="primary" @click="selectFirst">只选一级</el-button>
    <el-tree
      :default-checked-keys="defaultCheck" 
      ref="tree" 
      :data="columnList" 
      :props="props" 
      show-checkbox
      @check="handleCheckChange" 
      node-key="value"/>
  </div>
</template>

组件的 Props
这个组件有两个主要的 props，分别是 columnList 和 defaultCheck。

columnList：这是一个数组，用于存储所有可选择的列。
defaultCheck：初始选中的列，以数组的形式传入。

组件的逻辑

<script>
export default {
   
  props: {
   
    columnList: {
   
      type: Array,
      default() {
   
        return [];
      }
    },