element table表格，动态生成表头，基于可拖拽组件，拖动排序

效果展示

 

 使用步骤

    所需页面根据解释粘入 表格页面(父组件).txt 中代码，
    引入dragList.vue组件

1.表格页面(父组件)

<dragList  @radio="ssss" ></dragList>   //引用子组件
        <el-table
          v-if="asa"
          :data="tableData"
          row-key="id"
          border
          ref="purchaseTable"
          @selection-change="handleSelectionChange"
        >
          <template   v-for="column in tableColumns">
            <el-table-column
              :key="column.id"
              :prop="column.prop"
              v-if="column.isture"
              :class-name="column.isDrag"
              :label="column.label"
              :align="column.align"
              :type="column.type"
              :width="column.width"
            >
            </el-table-column>
          </template>
        </el-table>

1. data中动态表头数据

 tableColumns:[
        {id:"0",type:"selection",width:"55",align:"center",isture:false},
        {id:"1",type:"index",label:"序号",align:"center",scope:"scope",isture:true},
        {id:"2",label:"采购合同号",prop:"contractNo",align:"center",isDrag:"drag",isture:true},
        {id:"3",label:"原产国",prop:"countryName",align:"center",isDrag:"drag",isture:true},
        {id:"4",label:"产品",prop:"productName",align:"center",isDrag:"drag",scope:"ClientTag",isture:true},
        {id:"5",label:"合同总数量",prop:"contractNum,quantityUnit",isDrag:"drag",align:"center",scope: "slot-scope",isture:true},
        {id:"6",label:"合同总金额",prop:"contractPrice",align:"center",isture:true},
       ],

2. methods方法中

ssss(data){
   此方法为子向父传参触发事件
      this.asa = false
      this.tableColumns = data

      this.$nextTick(() => { //在数据加载完，重新渲染表格
        this.asa = true
        this.$refs['purchaseTable'].doLayout();
      })
    },

2.拖拽组件

<template>
  <el-popover
    placement="top"
    v-model="visible">
    <div class="test_wrapper" @dragover="dragover($event)">
      <div class="text" >字段设置</div>
      <el-divider></el-divider>
      <transition-group class="transition-wrapper" name="sort">
        <div v-for="(item,index) in dataList" :key='item.id' class="sort-item"
             :draggable="true"
             @dragstart="dragstart(item)"
             @dragenter="dragenter(item,$event)"
             @dragend="dragend(item,$event)"
             @dragover="dragover($event)"
        >
          <el-checkbox style="margin-right: 10px" v-model="dataList[index].isture" @change="rediochange" ></el-checkbox>{{ item.label }}
        </div>
      </transition-group>
    </div>
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="visible = false">取消</el-button>
      <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
    </div>
    <i v-if="visibleclose" @click="visclose" slot="reference" class="el-icon-s-fold"></i>
    <i v-if="visibleon" @click="vison" slot="reference" class="el-icon-s-unfold"></i>
<!--    <el-button slot="reference">删除</el-button>-->
  </el-popover>

</template>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
import draggable from "vuedraggable";
import Sortable from "sortablejs";
export default {
  components: {
    draggable,
    Sortable,
  },
  data() {
    return {
      visible:false,
      visibleclose:true,
      visibleon:false,
      name: null,
      oldData: null,
      newData: null,
      dataLists:[],
      dataList:[
        {id:"0",type:"selection",width:"55",align:"center",isture:false},
        {id:"1",type:"index",label:"序号",align:"center",scope:"scope",isture:true},
        {id:"2",label:"采购合同号",prop:"contractNo",align:"center",isDrag:"drag",isture:true},
        {id:"3",label:"原产国",prop:"countryName",align:"center",isDrag:"drag",isture:true},
        {id:"4",label:"产品",prop:"productName",align:"center",isDrag:"drag",scope:"ClientTag",isture:true},
        {id:"5",label:"合同总数量",prop:"contractNum,quantityUnit",isDrag:"drag",align:"center",scope: "slot-scope",isture:true},
        {id:"6",label:"合同总金额",prop:"contractPrice",align:"center",isture:true},
      ],
    }
  },
  methods: {
    // 拖拽事件
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    dragstart(value) {
      this.oldData = value
    },
    // 记录移动过程中信息
    dragenter(value, e) {
      this.newData = value
      e.preventDefault()
    },
    // 拖拽最终操作
    dragend(value, e) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.dataList.indexOf(this.oldData)
        let newIndex = this.dataList.indexOf(this.newData)
        let newItems = [...this.dataList]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData)
        this.dataList = [...newItems]
        this.$emit('radio',this.dataList)
      }
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover(e) {
      e.preventDefault()
    },
// 拖拽事件结束
//   点击展开拖拽框
    visclose(){
      this.visibleclose = false
      this.visibleon = true
    },
    //   点击关闭拖拽框
    vison(){
      this.visibleclose = true
      this.visibleon = false
    },
    rediochange(){
      this.$emit('radio',this.dataList)
    }
  }
}
</script>
<style>
.test_wrapper {
  padding-top: 20px;
  width: 250px;
  /*background-color: pink;*/
}
.el-divider--horizontal {
  margin: 15px 0;
}
.test_wrapper .text {
  font-size: 16px;
  margin-left: 20px;
  color: #0e0e9d;
}
.transition-wrapper {
  display: inline-block;
  margin-left: 20px
}
.transition-wrapper .sort-item{
  margin-bottom: 6px;
}
</style>