本文已参与「新人创作礼」活动，一起开启掘金创作之路。

可选表列组件

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

前言

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

一、效果图

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

二、构建组件

代码如下（示例）：

<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;">
              {{ item.title }}
            </el-checkbox>
          </el-checkbox-group>
        </el-popover>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  props: {
    //所有的列
    column: {
      type: Array,
      default () {
        return []
      }
    },
    
    //开始就隐藏的列
    hide: {
      type: Array,
      default () {
        return []
      }
    }
  },
  emits: ['change', 'refresh', 'search'],
  data () {
    return {
      checkList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    //得到去掉默认不显示的列
    getList () {
      this.column.forEach(item => {
        if (this.hide.indexOf(item.field) < 0) {
          this.checkList.push(item.field)
        }
      })
      this.change()
    },
	 //通过子组件的$emint去触发父组件的事件
    search () {
      this.$emit('search')
    },
    refresh () {
      this.$emit('refresh')
    },
    change (value) {
      this.$emit('change', this.getCheckColumn())
    },

    //返回选择的列
    getCheckColumn () {
      const arr = []
      for (let i = 0; i < this.column.length; i++) {
        if (this.checkList.indexOf(this.column[i].field) > -1) {
          arr.push(this.column[i])
        }
      }
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
.table-column-wrapper{
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 40px;
}
ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
ul{
  position: absolute;
  right: 0;
  border: 1px solid #ddd;
  border-right: none;
}
li{
  display: inline-block;
  width: 40px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #333;
  border-right: 1px solid #ddd;
  cursor: pointer;
}
</style>

三、在父组件中使用

代码如下（示例）：

<template>
	<div v-show="searchStatus">
		 <!-- 搜索条件的组件 -->
	</div>
	<table-column
	        @search="searchColumn"
	        @refresh="toQuery"
	        @change="changeColumn"
	        :column="columns"
	        style="padding-bottom: 10px"
	      >
	      <!-- 下面的元素会放到子组件中的插槽中 -->
	   <el-button
	          @click="
	            downExcel(url, name,downParam)
	          "
	          type="warning"
	          size="mini"
	          style="margin-left: 10px"
	        >下载
	    </el-button>
	</table-column>
	<el-table>
		<template v-for="(v, i) in checkColumns" :key="i">
          <el-table-column
            :prop="v.field"
            :label="v.title"
            :width="v.width"
            :min-width="v.minWidth"
            align="center"
          >
	          <template v-slot="scope">
              	<span>{{ scope.row[v.field] }}</span>
            </template>
          </el-table-column>
	</el-table>
</template>
<script>
	import TableColumn from "@/components/TableColumn";//引入子组件
	export default {
	  		components: {
			  	TableColumn
			},
		  data () {
		    return {
		    	searchStatus: true,
		    	columns: [
        			{ field: "reportDate", title: "时间" },
        			{ field: "reportDate2", title: "时间2" },
        			{ field: "reportDate3", title: "时间3" },
        			{ field: "reportDate4", title: "时间4" },
        			//初始全部的列
        		],
        		checkColumns:[],//最后在表格中显示的列
        		hide:[
        			{ field: "reportDate4", title: "时间4" },
					//默认不显示的列
				]
		     }
		  },
		  methods: {
		  // 显示隐藏搜索组件
			searchColumn () {
		      this.searchStatus = !this.searchStatus
		    },
		    //选择表格中出现的列后将那些选择的列传入表格中要渲染的列
		    changeColumn (value) {
		      this.checkColumns = value
		    },
		    //查询数据
		    toQuery () {
		      this.init()
		    },
		 }
	}
</script>