在vue的表格中可选表列的组件

可选表列组件

在可选表列基础上我还加了对搜索部分的显示隐藏，还有数据的刷新功能

---

---

前言

表格中表列太多，左右拉动不方便，且大部分时候不需要一些表列显示，所以需要做可选表列的功能

一、效果图

示例，搜索框可以控制上面整个条件查找组件的显示隐藏，这样可以更大空间去看下面表格的数据，中间的刷新可以刷新数据，右边的选项可以控制表格的列，可以点击隐藏自己不需要的列。

二、构建组件

代码如下（示例）：

<template>
  <div class="table-column-wrapper">
  <!-- 插槽，可以放左边的下载之类的组件 -->
    <slot></slot>
    <ul>
      <!-- 可以显示隐藏搜索组件，下面的svg组件更换成自己注册的 -->
      <li @click="search"><svg-icon icon-class="search" /></li>

      <!-- 可以刷新表格数据 -->
      <li @click="refresh"><svg-icon icon-class="refresh" /></li>

      <!-- 可以选择表格中出现的列 -->
      <li>
        <el-popover
          placement="bottom-start"
          :width="140"
          trigger="click">
          <template #reference>
            <svg-icon icon-class="operation" />
          </template>
          <el-checkbox-group v-model="checkList" @change="change">
            <el-checkbox
              v-for="item in column"
              :label="item.field"
              :key="item.field"
              style="width: 100%;margin-right: 0;">