一. 下载依赖包：npm install vuedraggable -S
二. 在需要使用的当前界面引入依赖，注册组件：
import draggable from 'vuedraggable'export default {components: {draggable },}
三. 在template 中建立表格，分别写出thead 部分不变， 此处需要将draggable 渲染成tbody，不然draggable会被解析成div 影响样式。
<table class="dataTabble"><thead><tr><th width="50" class="my-th"><a-checkbox @change="onChangeAll" :checked="checkedAll" :indeterminate="indeterminate" :disabled="list.length===0"></a-checkbox></th><th v-for="(item,index) in theadList" :width="item.width" :key="index" class="my-th">{{item.title }}</th></tr></thead><draggable v-if="list.length>0" v-model="list" element="tbody" handle=".hand" @update="datadragEnd"><tr v-for="(item,index) in list" :key="index" ><td class="my-td"><a-checkbox @change="(event)=>onChange(event,item)" :checked="item.checked"></a-checkbox></td><td class="my-td" v-for="(column,index2) in theadList" :key="index2"><a-icon type="slack" class="hand" v-if="index2===0" />{{item[column.dataIndex] }}</td></tr></draggable><div v-else><span>暂无数据</span></div></table>
js部分(此处的表格还写了全选非全选的功能)
export default {components: {draggable },props: {tableList: {type: Array,default: () => []},theadList: {type: Array,default: () => []}},data () {return {checkedAll: false,indeterminate: false,list: []}},watch: {tableList: {handler (newVal) {this.list = newVal.map(item => {item.checked = falsereturn item})},immediate: true}},methods: {onChange (event, item) {let checkedNum = 0let arr = [...this.list]arr.map(i => {if (item.id === i.id) {console.log(i.id)i.checked = event.target.checked}if (i.checked) checkedNum++})this.list = arrif (checkedNum === 0) {// 不选this.checkedAll = falsethis.indeterminate = false} else if (checkedNum > 0 && checkedNum < this.list.length) {// 半选this.checkedAll = falsethis.indeterminate = true} else {// 全选this.checkedAll = truethis.indeterminate = false}this.$emit('handle-option-end', this.list)},onChangeAll (e) {this.checkedAll = e.target.checkedthis.indeterminate = falselet arr = [...this.list]arr.map(i => {i.checked = e.target.checked})this.list = arrthis.$emit('handle-option-end', this.list)},datadragEnd () {this.$emit('handle-option-end', this.list)// console.log(this.list, '----')}}
四.相关方法
methods: {//拖动中与拖动结束getdata(evt) {console.log(evt.draggedContext.element.id);},datadragEnd(evt) {console.log("拖动前的索引 :" + evt.oldIndex);console.log("拖动后的索引 :" + evt.newIndex);console.log(this.tags);},
至此就完成了一个表格拖拽的组件
