效果展示
使用步骤
所需页面根据解释粘入 表格页面(父组件).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="/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>
