vue+element-ui 封装列设置组件（附代码）

1、实现功能

（1）自定义固定位置：固定在列首、固定在列尾、不固定

（2）灵活控制列的显示和隐藏

（3）重置

2、思路

数据传递

父组件传递给子组件的的数据：全部的列数据

子组件传递给父组件的数据：选中需要展示且确定固定位置的列数据——checkedColumns

处理列数据

（1）将所有的列数据存储到固定列首、固定列尾和不固定列表，初始化的时候除了操作列，其他都默认是固定

（2）分别遍历这三个列表

（3）全选的实现：初始化为全选，全选按钮改变更改checkedColumns的值，传递给父组件

（4）选中or not的实现：element-ui的组件的change事件会返回选中的列表，将这个列表赋值给checkedColumns 传递给父组件

（5）固定更改：从另外的两个列表中删除更改的列数据，添加到目标列表

（6）解决问题：列的顺序会改变：遍历的列表要进行处理，通过computed，进行排序（这里的列数据要带index属性，来确定它的顺序）

3、代码实现

<template>
  <div class="container">
    <el-dropdown  trigger="click" :hide-on-click="false">
      <span >列设置<i class="el-icon-arrow-down el-icon--right"></i></span>
      <el-dropdown-menu slot="dropdown" style="overflow-y:scroll;max-height:310px">
        
        <el-dropdown-item  class="bottom-line">
          <el-checkbox  
            v-model="isCheckAll"
            @change="checkAllChange">
            全部展示
          </el-checkbox>
        </el-dropdown-item>

        <el-dropdown-item>
          <div 
            @click="reset" 
            style="color: rgb(32, 104, 171);margin-left: 20px;">
            重置
          </div>
        </el-dropdown-item>
        
        <span v-if="leftFixed.length>0">固定列首</span>
        <el-dropdown-item v-for="column in leftFixed" :key="column.index" class="itemSelection">
          <el-checkbox-group v-model="checkedColumns" @change="checkedColumnsChange">
            <el-checkbox :label="column" class="column">{{column.label}}</el-checkbox>
          </el-checkbox-group>
          <div class="itemSelection">
            <div @click.stop="toNoFixed(column)"> 不固定 | </div>
            <div @click.stop="toRightFixed(column)">| 固定在列尾</div>
          </div>
        </el-dropdown-item>

        <span v-if="noFixed.length>0">不固定</span>
        <el-dropdown-item v-for="column in noFixed" :key="column.index" class="itemSelection">
          <el-checkbox-group v-model="checkedColumns" @change="checkedColumnsChange">
            <el-checkbox :label="column" class="column">{{column.label}}</el-checkbox>
          </el-checkbox-group>
          <div class="itemSelection">
            <div @click.stop="toLeftFixed(column)"> 固定在列首 | </div>
            <div @click.stop="toRightFixed(column)">| 固定在列尾</div>
          </div>
        </el-dropdown-item>

        <span v-if="rightFixed.length>0">固定列尾</span>
        <el-dropdown-item v-for="column in rightFixed" :key="column.index" class="itemSelection">
          <el-checkbox-group v-model="checkedColumns" @change="checkedColumnsChange">
            <el-checkbox :label="column" class="column">{{column.label}}</el-checkbox>
          </el-checkbox-group>
          <div class="itemSelection">
            <div @click.stop="toLeftFixed(column)">| 固定在列首</div>
            <div @click.stop="toNoFixed(column)"> 不固定 | </div>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  export default {
    props:{
      columns:{
          type:Array,
          default:[]
      },

    },

  data(){
    return{
      isCheckAll:true, //全选
      leftFixedList:[],   //固定首列
      noFixedList:[],  //不固定
      rightFixedList:[],    //固定尾列
      checkedColumns:[]
    }
  },

    mounted() {
      this.initSetting()
    },

    // 重新排序
  computed: {
    leftFixed() {
      return this.leftFixedList.slice().sort((a, b) => a.index - b.index);
      
    },
    noFixed() {
      return this.noFixedList.slice().sort((a, b) => a.index - b.index);
    },
    rightFixed() {
      return this.rightFixedList.slice().sort((a, b) => a.index - b.index);
    }
  },

  methods: {
    // 初始化
    initSetting(){
      // 第一次加载，除了操作都是不固定的状态
      this.noFixedList = this.columns.filter(item => item.prop !== 'operations')
      this.rightFixedList = this.columns.filter(item => item.prop === 'operations')
      
      // 第一次为全选状态
      this.checkAllChange(this.isCheckAll)
    },

    // 列显示——全选
    checkAllChange(isCheckAll){
      this.checkedColumns=isCheckAll ? this.columns:[];
      this.$emit('change-checked',this.checkedColumns)
      
    },

    // 选中列
    checkedColumnsChange(checkedColumns){
      this.checkedColumns=checkedColumns;
      this.isCheckAll = this.checkedColumns.length=== this.columns.length;
      this.$emit('change-checked',this.checkedColumns)
    },

    // 固定首列
    toLeftFixed(val){
      this.$set(val, 'fixed', 'left');
      this.noFixedList = this.noFixedList.filter(item=>item !== val);
      this.rightFixedList = this.rightFixedList.filter(item => item !== val);
      this.leftFixedList.push(val)
    },
    // 固定尾列
    toRightFixed(val){
      this.$set(val, 'fixed', 'right');
      val.fixed="right"
      this.noFixedList = this.noFixedList.filter(item=>item !== val);
      this.leftFixedList = this.leftFixedList.filter(item=>item !== val);
      this.rightFixedList.push(val)
    },
    // 不固定
    toNoFixed(val){
      this.$delete(val, 'fixed');
      this.leftFixedList= this.leftFixedList.filter(item=>item !== val);
      this.rightFixedList = this.rightFixedList.filter(item => item !== val);
      this.noFixedList.push(val)
    },

    // 重置
    reset(){
      for (let i = 0; i < this.rightFixedList.length; i++) {
        const item = this.rightFixedList[i];
        if (item.prop === "operations") {
          this.$set(item,'fixed','right')
        }
        else{
          this.$delete(item, 'fixed');
        }
      }
      for (let i = 0; i < this.leftFixedList.length; i++) {
        const item = this.leftFixedList[i];
        if (item.prop === "operations") {
          this.$set(item,'fixed','right')
        }
        else{
          this.$delete(item, 'fixed');
        }
      }
      // 第一次加载，除了操作都是不固定的状态
      this.noFixedList = this.columns.filter(item => item.prop !== 'operations')
      this.rightFixedList = this.columns.filter(item => item.prop == 'operations')
      this.leftFixedList=[]
      // 第一次为全选状态
      this.isCheckAll=true
      this.checkAllChange(this.isCheckAll)
      },
  }
}; 
</script>

 实现固定：

<el-table-column
    :fixed="item.fixed"
>