//html代码 <div class="dialog-tree"> <el-tree :data="templateLexiconData" :props="templateLexiconProps" node-key="Id" draggable :key="tree_key" :render-content="renderContent" :default-expanded-keys="defaultExpand" @node-click="reportTemplateTreeClick" :expand-on-click-node="false" :allow-drop="collapse" @node-drop="sort" v-loading="loading" ></el-tree> </div>
//js代码
// 结构树操作group node,
renderContent(h, { node, data, store }) {
return (
<span
class="el-tree-span"
on-mouseenter={() => this.mouseenteract(data)}
on-mouseleave={() => this.mouseleaveact(data)}
>
<span class="el-tree-font">{data.Name}</span>
{this.isact == data ? (
<span class="tree_node_op">
<i
class="el-icon-upload2"
style="font-size:12px"
v-show="data.show"
on-click={() => this.nodeUp(node, data)}
>
置顶
</i>
</span>
) : (
<span></span>
)}
</span>
);
},
// 树节点鼠标移入移出
mouseenteract(da) {
this.isact = da;
},
mouseleaveact(da) {
this.isact = "";
},
//置顶
nodeUp(node, data) {
const nextLabel = node.label;
const parent = node.parent;
const children = parent.data.Children || parent.data;
const cIndex = children.findIndex(d => d.Id === data.Id);
if (parent.level === 0 && cIndex === 0) {
this.$message.warning("已经排序第一的不能再置顶！");
} else if (parent.level !== 0 && cIndex === 0) {
this.$message.warning("已经排序第一的不能再置顶！");
} else if (
(parent.level === 0 && cIndex !== 0) ||
(parent.level !== 0 && cIndex !== 0)
) {
const tempChildrenNodex1 = children[0];
const tempChildrenNodex2 = children[cIndex];
this.$set(children, 0, tempChildrenNodex2);
this.$set(children, cIndex, tempChildrenNodex1);
if (typeof parent.label != "undefined") {
this.defaultExpand[0] = parent.label;
}
const _newsList = [];
const _data =
node.level == 1 ? node.parent.data : node.parent.data.Children;
_data.forEach((item, index) => {
_newsList.push({
TName: item.Name,
TSearchId: index + 1
});
});
const types = 2;
this.getSetorderData(node, data, nextLabel, _newsList, types); //接口传值，根据自己的需求来
}
this.tree_key++;
},
//拖拽判断
collapse(draggingNode, dropNode, type) {
if (draggingNode.level === dropNode.level) {
if (draggingNode.parent.id === dropNode.parent.id) {
// 向上拖拽 || 向下拖拽
return type === "prev" || type === "next";
}
} else {
// 不同级进行处理
return false;
}
},
//拖拽后
sort(node, data, type) {
const nextLabel = node.label;
const dataArr = data.parent.childNodes;
let cIndex = 0;
let id = 0;
let orderArrOld = JSON.parse(JSON.stringify([...data.parent.data]));
let orderArr = [...data.parent.data];
orderArr.forEach((item, index) => {
item.Order = index + 1;
});
orderArr = orderArr.filter((item, index) => {
console.log(item.Order !== orderArrOld[index].Order);
if (item.Order !== orderArrOld[index].Order) return item;
});
const _node = data.parent.childNodes;
const _length = _node.length - id;
const _list = _node.slice(-_length);
const _newsList = [];
_list.forEach((item, index) => {
_newsList.push({
TName: item.label,
TSearchId: cIndex + index + 1
});
});
const types = 1;
this.getSetorderData(node, data, nextLabel, _newsList, types); //接口传值，根据自己的需求来
}
javascript如何利用draggable实现一个拖拽效果
上面是“el-tree实现拖动置顶排序”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_30.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
