el-tabel进行拖拽排序和点击显示隐藏

封装完成的组件代码 

<template>
  <div>
    <el-popover
      placement="right-start"
      width="150"
      trigger="hover">
      <el-tooltip class="item" content="上下拖动字段进行排序" placement="left" effect="light">
        <draggable v-model="sortModel"
                   class="table-column-sorter" chosenClass="is-chosen" animation="true"
                   @change="handleTableColumnSort"
        >
          <el-checkbox  v-model="column.isShow"  v-for="column in sortModel" :key="column.name"
                        class="sortable-column">
            <div style="display: flex;align-items: center;justify-content:space-between;width: 100%">
              <span style="margin: 5px 0">{{ column.name }}</span>
              <i class="el-icon-sort" style="cursor: move;text-align: right"></i>
            </div>
          </el-checkbox>
        </draggable>
      </el-tooltip>
      <i class="el-icon-s-unfold" style="color: #198cff" slot="reference"></i>
    </el-popover>
  </div>
</template>

<script>
import draggable from "vuedraggable"
export default {
  name: "PackageSortElement",
  components:{
    draggable,
  } ,
  props:{
    //接收调用组件者传参数    :AllParameters="sortModel"   sortModel是组件中自己定义的排序顺序
    //用AllParameters去接收
    AllParameters:{
      type: Array,
    }
  },
  data(){
    return{
      //接收到的数据传入 拖拽组件中进行排序
      sortModel:this.AllParameters
    }
  },
  methods:{
    handleTableColumnSort() {
      //当我们进行拖动的时候去调用 组件的change事件进行传参    this.sortModel是排序完成之后的顺序，拿到并且在原页面进行赋值
      this.$emit("change", this.sortModel)
    },
  }
}
</script>

<style lang="scss" scoped>
.table-column-sorter {
  position: relative;

  ::v-deep .el-checkbox__label {
    width: 88%;
  }

  .title-tooltip {
    position: absolute;
    left: -150px;
    top: 50%;
  }

  ::v-deep .el-checkbox {
    width: 100%;
  }

  .sortable-column {
    padding: 3px;
    color: #aaaaaa;
    cursor: pointer;
  }

  .sortable-column:hover {
    background: #cbedfc;
    padding: 3px;
  }
}

.el-icon-s-unfold {
  cursor: pointer;
  position: absolute;
  z-index: 998;
  right: 32.5px;
  top: 9px;
  height: 12px;
}

</style>

引用组件
import PackageSortElement from "../components/PackageSortElement";

 <PackageSortElement :AllParameters="sortModel"   @change="SortList"></PackageSortElement>

sortModel：原页面自己的顺序排序

引用组件代码 

  <div class="cancellation-ticket-content-table">
      <PackageSortElement :AllParameters="sortModel"  @change="SortList"></PackageSortElement>
      <template>
        <el-table
          ref="inputListTable"
// tableData后端传过来的数据
          :data="tableData"
          stripe
          tooltip-effect="dark"
          @selection-change="invoiceSelection"
          v-el-table-height-adaptive height="200px"
          border
          :key="key"
        >
          <el-table-column type="selection"/>
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
//遍历数组顺序
          <template v-for="(data,index) in sortModel">
            <el-table-column :label="data.name"
                             :key="index"
                             v-if="data.isShow"
                             :min-width="data.width"
                             :show-tooltip-when-overflow="data.isShow">
              <template v-slot="{row}">
                <div v-if="data.name === '香肠'"> {{ row.xc}}</div>
          
                <div v-else-if="data.name === '号码'"> {{ row.hm}}</div>
               
               <div v-else-if="data.name === '代码'"> {{ row.dm}}</div>

                <div v-else-if="data.name === '状态'"> {{ row.zt}}</div>
                <div v-else-if="data.name === '手机号'"> {{ row.sjh}}</div>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="" width="90"   fixed="right">
          </el-table-column>
        </el-table>
      </template>
    </div>


date(){
  return{
//自己定义的顺序，
     sortModel: [
        {
          name: '香肠,
          isShow: true
        },
        {
          name: '号码',
          isShow: true
        },
        {
          name: '代码',
          isShow: true
        },
        {
          name: '状态',
          isShow: true
        },
        {
          name: '手机号',
          isShow: true
        },
      ],
}
}


//事件  拿到从组件内部处理的数据顺序并赋值
   SortList(value){
      this.sortModel = value;
    },

 :AllParameters="sortModel"   ，根据 :AllParameters将sortModel传到封装的组件内

封装组件内部根据  this.$emit("change", this.sortModel)  @change="SortList"事件 将处理好的数据传到原页面  

然后进行接收替换：

SortList(value){
      this.sortModel = value;
    },