效果展示

 

 使用步骤

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

1.表格页面(父组件)

<dragList  @radio="ssss" ></dragList>   //引用子组件<el-tablev-if="asa":data="tableData"row-key="id"borderref="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 = falsethis.tableColumns = datathis.$nextTick(() => { //在数据加载完，重新渲染表格this.asa = truethis.$refs['purchaseTable'].doLayout();})},

2.拖拽组件

<template><el-popoverplacement="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 = valuee.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 = falsethis.visibleon = true},//   点击关闭拖拽框vison(){this.visibleclose = truethis.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>