<el-tree
:data="data"
:props="defaultProps"
node-key="id"
draggable
:allow-drop="allowDrop"
@node-drop="handleDrop"
/>
data() {
return {
data: [
{id:'001',name:'名称'},
{id:'002',name:'类型'},
{id:'003',name:'备注'}
],
defaultProps: {
label: 'name'
},
list: { assetFieldIds: [] }
}
},
methods: {
// 只允许同一级之间拖拽排序
allowDrop(draggingNode, dropNode, type) {
if (draggingNode.level === dropNode.level) {
if (draggingNode.data.parentId === dropNode.data.parentId) {
return type === 'prev' || type === 'next'
}
} else {
return false
}
},
// 拖拽完成时触发的事件
handleDrop(draggingNode, dropNode, dropType, ev) {
for (const item of dropNode.parent.childNodes) {
this.list.assetFieldIds.push(item.data.id)
// this.list是排序后的id数组,id是因为node-key='id'
}
},
funGetDragSort() {
//利用this.list请求接口
}
}
el-tree实现同一级排序
最新推荐文章于 2024-08-07 11:00:54 发布