VUE tree树双击选中(显示层级结构) 及 vuedraggable插件拖拽功能的实现_el-tree树节点双击

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

children: [{

id: 11,

label: “rq”

},{

id: 12,

label: “wlbm”

},{

id: 13,

label: “count”}]},

{

id: 10,

label: “table2”,

children: [{

id: 14,

label: “rq2”},{

id: 15,

label: “wlbm2”

},{

id: 16,

label: “armt”}]}]},

{

id: 20,

label: “视图”,

children: [{

id: 17,

label: “view1”},{

id: 18,

label: “view2”}]}]},

{

id: 2,

label: “数据源2”,

children: [{

id: 5,

label: “二级 2-1”},

{

id: 6,

label: “二级 2-2”}]

},{

id: 3,

label: “数据源3”,

children: [{

id: 7,

label: “二级 3-1”

},{

id: 8,

label: “二级 3-2”}]}],

defaultProps: {

children: “children”,

label: “label”

}};},

methods: {

onMove(e) { //拖拽事件 https://blog.csdn.net/Kiruthika/article/details/123903706 可查看相关配置

if (

JSON.stringify(e.relatedContext.list).includes(

JSON.stringify(e.draggedContext.element)

) === true

) {

return false;

} else {

return true;

}

},

toChange(e) {//拖拽事件

console.log(e);

},

onSubmit() {

console.log(“submit!”);

console.log(this.form);

},

//节点点击事件

handleNodeClick(data, node) {

//记录点击次数

this.treeClickCount++;

//单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件

if (this.treeClickCount >= 2) {

return;

}

//计时器,计算300毫秒为单位,可自行修改

this.timer = window.setTimeout(() => {

if (this.treeClickCount == 1) {

//把次数归零

this.treeClickCount = 0;

//单击事件处理

// console.log(data);

// console.log(node);

} else if (this.treeClickCount > 1) {

//把次数归零

this.treeClickCount = 0;

//双击事件

this.rowList = [];

this.getParent(node);

// this.fieldarr.push(this.rowList.join(‘.’))

// console.log(data.children, “—>rowList”);

if (data.children === undefined || data.children.length === 0) {

if (this.fieldarr.indexOf(…[this.rowList.join(“.”)]) == -1) {

this.fieldarr.push(this.rowList.join(“.”));

this.fieldarr2.push({

name: this.rowList.join(“.”),

id: data.id

});

// console.log(this.fieldarr2, “—>rowList”);

} else {

this.$message.error(“选择字段重复”);

}

} else {

this.$message.error(“不能选表名,请选择字段”);

}

}

}, 300);

},

getParent(node) {

var that = this;

if (node.parent.data && !Array.isArray(node.parent.data)) {

node.parent.data instanceof Object &&

that.rowList.unshift(node.data.label);

that.getParent(node.parent);

} else if (that.rowList.length === 0) {

if (that.parentList.length === 0) {

that.rowList.unshift(node.data.label);

}

} else {

that.rowList.unshift(node.data.label);}}}};