vue3 el-table实现列筛选功能，控制列的显示和隐藏（简单粗暴

代码

 <!-- 对活动类型进行选择 -->
      <el-icon :size="20" style="float: right; font-size: 33px" class="show-col-btn">
        <el-popover placement="bottom" trigger="hover" width="80">
          <template #reference>
            <el-icon :size="20"><Operation /></el-icon>
          </template>
          <div>
            <el-checkbox-group
                v-model="checkedColumns"
                @change="watchCheckedColumns"
                class="checkbox-wrap"
            >
              <el-checkbox size="large"  style="display: block" v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-popover>
      </el-icon>

      <!-- 表格主体 -->
      <el-table class="table" :data="tableData"  :key="reload"   height="400" :header-cell-style="{color:'#00567A','text-align':'center','font-size': '14px'}">
        <el-table-column v-if="colData[0].istrue"  align="center"  key="Math.random()" prop="date" label="ID"></el-table-column>
        <el-table-column v-if="colData[1].istrue"  align="center"  key="Math.random()" prop="name" label="名称"></el-table-column>
        <el-table-column v-if="colData[2].istrue"  align="center"  key="Math.random()" prop="address" label="APP"></el-table-column>
        <el-table-column v-if="colData[3].istrue"  align="center"  key="Math.random()" prop="address" label="元数据"></el-table-column>
        <el-table-column v-if="colData[4].istrue"  align="center"  key="Math.random()" prop="address" label="描述"></el-table-column>
        <el-table-column v-if="colData[5].istrue"  align="center"  key="Math.random()" prop="address" label="创建者"></el-table-column>
        <el-table-column v-if="colData[6].istrue"  align="center"  key="Math.random()" prop="address" label="创建时间"></el-table-column>

      </el-table>

script代码

变量定义

    //用于存放随机数用于key属性的绑定
  var reload = ref();

  // 多选框的列表，列出表格的每一列
  const checkBoxGroup = ref(
      ["ID", "名称", "APP", "元数据", "描述", "创建者", "创建时间", ]
  )

  // 当前选中的多选框，代表当前展示的列
  const checkedColumns = ref(
      ["ID", "名称", "APP", "元数据", "描述", "创建者", "创建时间", ]
  )

  // colData中列出表格中的每一列，默认都展示
  const colData = reactive([
        { title: "ID", istrue: true },
        { title: "名称", istrue: true },
        { title: "APP", istrue: true },
        { title: "元数据", istrue: true },
        { title: "描述", istrue: true },
        { title: "创建者", istrue: true },
        { title: "创建时间", istrue: true },
  ])

  // 监听checkedColumns的变化，当checkedColumns发生变化时，重新渲染表格
  const watchCheckedColumns = () => {
    // 遍历colData，将colData中的istrue属性设置为false
    colData.forEach((item) => {
      item.istrue = false
    })
    // 遍历checkedColumns，将checkedColumns中的值在colData中找到对应的列，将istrue属性设置为true
    checkedColumns.value.forEach((item) => {
      colData.forEach((col) => {
        if (item === col.title) {
          col.istrue = true
        }
      })
    })
    // 重新渲染表格
    reload.value = Math.random()
  }

重点是 reload.value = Math.random() 这一行代码，解决了表格闪烁的问题。

总的代码

<template>
  <div>
    <!-- 对活动类型进行选择 -->
    <el-icon :size="20" style="float: right; font-size: 33px" class="show-col-btn">
      <el-popover placement="bottom" trigger="hover" width="80">
        <template #reference>
          <el-icon :size="20" class="remove">
            <component :is="IconBaseline5g" />
          </el-icon>
        </template>
        <div>
          <el-checkbox-group
            v-model="checkedColumns"
            @change="watchCheckedColumns"
            class="checkbox-wrap"
          >
            <el-checkbox
              size="large"
              style="display: block"
              v-for="item in checkBoxGroup"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-checkbox-group>
        </div>
      </el-popover>
    </el-icon>

    <!-- 表格主体 -->
    <el-table
      class="table"
      :data="tableData"
      :key="reload"
      height="400"
      :header-cell-style="{ color: '#00567A', 'text-align': 'center', 'font-size': '14px' }"
    >
      <el-table-column
        v-if="colData[0].istrue"
        align="center"
        key="Math.random()"
        prop="date"
        label="ID"
      />
      <el-table-column
        v-if="colData[1].istrue"
        align="center"
        key="Math.random()"
        prop="name"
        label="名称"
      />
      <el-table-column
        v-if="colData[2].istrue"
        align="center"
        key="Math.random()"
        prop="address"
        label="APP"
      />
      <el-table-column
        v-if="colData[3].istrue"
        align="center"
        key="Math.random()"
        prop="address"
        label="元数据"
      />
      <el-table-column
        v-if="colData[4].istrue"
        align="center"
        key="Math.random()"
        prop="address"
        label="描述"
      />
      <el-table-column
        v-if="colData[5].istrue"
        align="center"
        key="Math.random()"
        prop="address"
        label="创建者"
      />
      <el-table-column
        v-if="colData[6].istrue"
        align="center"
        key="Math.random()"
        prop="address"
        label="创建时间"
      />
    </el-table>
  </div>
</template>
<script setup>
import IconBaseline5g from "~icons/ep/edit"
//用于存放随机数用于key属性的绑定
var reload = ref()

// 多选框的列表，列出表格的每一列
const checkBoxGroup = ref(["ID", "名称", "APP", "元数据", "描述", "创建者", "创建时间"])

// 当前选中的多选框，代表当前展示的列
const checkedColumns = ref(["ID", "名称", "APP", "元数据", "描述", "创建者", "创建时间"])

// colData中列出表格中的每一列，默认都展示
const colData = reactive([
  { title: "ID", istrue: true },
  { title: "名称", istrue: true },
  { title: "APP", istrue: true },
  { title: "元数据", istrue: true },
  { title: "描述", istrue: true },
  { title: "创建者", istrue: true },
  { title: "创建时间", istrue: true }
])

const tableData = ref([
  { ID: 1, name: "纸巾", APP: "百货", address: 30, APP: "百货" },
  { ID: 2, name: "抽纸", type: "百货", address: 18, APP: "百货" },
  { ID: 3, name: "水杯", type: "百货", address: 50, APP: "百货" }
])

// 监听checkedColumns的变化，当checkedColumns发生变化时，重新渲染表格
const watchCheckedColumns = () => {
  // 遍历colData，将colData中的istrue属性设置为false
  colData.forEach((item) => {
    item.istrue = false
  })
  // 遍历checkedColumns，将checkedColumns中的值在colData中找到对应的列，将istrue属性设置为true
  checkedColumns.value.forEach((item) => {
    colData.forEach((col) => {
      if (item === col.title) {
        col.istrue = true
      }
    })
  })
  // 重新渲染表格
  reload.value = Math.random()
}
</script>
<style scoped></style>