element表格实现列显影/排序功能

1.具体需求

今天小谭给大家分享的是element UI里实现表格的列显影以及排序功能，具体实现也很简单 我们先来看一下效果图吧！

就是要根据图上的效果来控制表格每一列的显影以及是否可以排序等功能
 

2.具体实现

先声明好数据，考虑到需要单独设置每个列的宽度，是否显影，是否排序以及是否超出省略提示等；再加上特殊条件的判断等；

tableColumnList: [
        {
          label: "列名",//列名
          prop: "name",//对应字段名
          width: "150",//列宽，如果为空宽度自适应
          isShow: true,//是否默认展示
          sortable: false,//是否默认排序
          showOverflowTooltip: true,//是否一行显示，超出省略
          //特殊展示条件 只有showFlag和isShow都为true的时候才会显示
          showFlag: () => {
            return this.active != 0;
          },
        },
]

数据声明好了 就要在页面上进行操作了：

注意 这只是循环出列的部分代码，完整demo请根据需求具体实现

      <template v-for="(item, index) in tableColumnList">
          <el-table-column
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            :sortable="item.sortable"
            :width="item.width"
            v-if="(item.showFlag ? item.showFlag() : true) && item.isShow"
          >
            <template slot-scope="scope">
               <!-- 考虑到表格中有的内容需要自定义，所以这边建议使用插槽 -->
              <span v-if=="item.prop=='name'">
                自定义内容
              </span>
              <span v-else>
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
        </template>

接下来再实现弹窗控制显影的功能：

    <el-drawer :visible.sync="tableColumnDrawer" title="列显隐" class="tableColumnDrawer">
      <el-divider></el-divider>
      <el-table :data="tableColumnList" border style="width: 100%">
        <el-table-column prop="label" label="列名" align="center">
        </el-table-column>
        <el-table-column label="显示" align="center">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.isShow"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            <el-checkbox  v-model="scope.row.sortable"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

好了到这里就需求就实现啦，代码比较粗糙，如果大家有更好的解决方案欢迎在评论区交流呀！