element-ui树形组件实现懒加载、右键新增、右键删除、右键
编辑，以及拖拽更换节点
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="tree-box">
<div class="tree-title">
<el-input placeholder="输⼊关键字进⾏过滤" im="tree.filterText" size="small"></el-input>
</div>
<div class="tree-content" v-loading="tree.loading">
<div v-if="position=='page'" >
<span >(右键可编辑视频树形分类)</span>
</div>
<el-tree
class="filter-tree"
:load="loadNode"
lazy
:draggable="$hasPermission('video:video-manage:dragclass')"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
:default-expanded-keys="pandedKeys"
node-key="id"
:highlight-current="highlightCurrent"
:props="tree.defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
@node-click="hadleNodeClick"
@node-contextmenu="rihgtClick"
@node-drop="handleDrop"
:allow-drop="allowDrop"
:allow-drag="allowDrag"
ref="tree"
></el-tree>
<div v-show="menuVisible" id="rightClickMenu">
<ul class="menu-list">
<li>
<el-button
type="text"
size="small"
@click="NodeConfig('add')"
@click="NodeConfig('add')"
v-if="$hasPermission('video:video-manage:addclass')"
>新增⼦分类</el-button>
</li>
<li>
<el-button
type="text"
size="small"
:disabled="DATA&&DATA.id=='1270550715957256193'"
@click="NodeDel()"
v-if="$hasPermission('video:video-manage:deleteclass')"
>删除分类</el-button>
</li>
<li>
<el-button
type="text"
size="small"
:disabled="DATA&&DATA.id=='1270550715957256193'"
@click="NodeConfig('edit')"
v-if="$hasPermission('video:video-manage:editclass')"
>编辑分类</el-button>
</li>
</ul>
</div>
</div>
</div>
<videoConfig ref="videoConfig" @updateTree="updateTree" />
</el-card>
</template>
<script>
import videoConfig from "@/components/video/model-videoClass-config";
import debounce from "lodash/debounce";
export default {
name: "",
components: {
videoConfig,
},
props: {
currentKey: {
type: String,
default: "",
},
position: {
type: String,
default: "page",
},
isSelect: {
type: Boolean,
default: false,
},
},
data() {
return {
configType: "",
menuVisible: false,
objectID: "",
DATA: null,
VALUE: null,
highlightCurrent: true,
tree: {
data: [],
expandedKeys: ['1270550715957256193'],/**设置默认展开的节点，此时必须设置node-key，其值为节点数据中的⼀个字段名，该字段在整棵树中是唯⼀的。 */        node: null,
resolve: null,
loading: false,
filterText: "",
filterText: "",
defaultProps: {
children: "children",
label: "name",
isLeaf: "isLeaf",
},
},
};
},
watch: {
"tree.filterText"(val) {
this.$filter(val);
},
},
computed: {
dataRule() {
return {
name: [
{
required: true,
message: this.$t("quired"),
trigger: "blur",
},
],
};
},
enabledConfig() {
return (
this.$hasPermission("video:video-manage:addclass") ||
this.$hasPermission("video:video-manage:editclass") ||
this.$hasPermission("video:video-manage:deleteclass")
);
},
},
created() {},
mounted() {},
methods: {
nodeselector//懒加载
async loadNode(node, resolve) {
if (node.level === 0) {
let rootData = [
{ id: "1270550715957256193", name: "视频分类", parentId: null ,children:[]},        ];
resolve(rootData);
this.$nextTick(() => {
this.$refs["tree"].setCurrentKey("1270550715957256193");
this.$emit("updateTreeItem", rootData[0]);
});
} else {
let ndoeData = await this.loadTreeData(node.data.id);
resolve(ndoeData);
}
if (this.currentKey) {
}
},
//⾼亮其中⼀项
reShowHighlight() {
this.$nextTick(() => {
this.$setCurrentKey(this.currentKey);
});
},
//加载树形数据
/
/加载树形数据
loadTreeData(parentId) {
return new Promise((resolve, reject) => {
this.$http
.get("/vod/mrcategory/list", {
params: {
parentId: parentId,
selectChildList: 0,
},
})
.then(({ data: res }) => {
resolve(res.data);
})
.catch((er) => {
reject(er);
});
});
},
// 搜索
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
// 右击
rihgtClick(event, object, node, element) {
if (
this.position === "modal" ||
!(
this.$hasPermission("video:video-manage:addclass") ||
this.$hasPermission("video:video-manage:editclass") ||
this.$hasPermission("video:video-manage:deleteclass")
)
) {
return;
}
if (this.objectID !== object.id) {
this.objectID = object.id;
this.DATA = object;//该节点所对应的对象
this.NODE = node;//该节点所对应的node
const parent = this.NODE.parent;
// this.$append(({ name: this.dataForm.name }, object));      } else {
}
document.addEventListener("click", (e) => {
});
let menu = document.querySelector("#rightClickMenu");
/* 菜单定位基于⿏标点击位置 */
menu.style.left = event.offsetX + 50 + "px";
p = event.offsetY + 50 + "px";
// menu.style.left = event.clientX + 30 + "px";
// p = event.clientY + 30 + "px";
},
// 点击树的item
hadleNodeClick(data, node) {
if (
this.position == "modal" &&
data.name == "视频分类" &&
this.isSelect
) {
this.highlightCurrent = false;
this.$emit("updateTreeItem", {
id: "",
name: "",
parentId: null,
});
} else {
this.highlightCurrent = true;
this.$emit("updateTreeItem", data);
}
},
// 树展开某⼀节点的时候
handleNodeExpand(data, node, ele) {
this.$set(ele, "expanded", true);
if (panded) {
},
// 树关闭某⼀节点的时候
handleNodeCollapse(data, node, ele) {
let index = pandedKeys.findIndex((item) => item === data.id);
if (index !== -1) {
}
this.$set(ele, "expanded", false);//需要⼿动折叠当前节点
},
NodeConfig(type) {
if (type === "add") {
this.$refs.videoConfig.initModal({ parentId: this.DATA.id });
} else {
let data = JSON.parse(JSON.stringify(this.DATA));
this.$refs.videoConfig.initModal(data);
}
},
//新增或者编辑的回调
updateTree(data) {
if (figType === "edit") {
this.$set(this.DATA, "name", data.name);
} else {
if (!this.DATA.children) {
this.$set(this.DATA, "children", []);
}
this.$nextTick(() => {
this.DATA.children.push(data);
});
}
},
/
/删除
NodeDel() {
this.$confirm(
this.$t("prompt.info", { handle: this.$t("delete") }),
this.$t("prompt.title"),
{
confirmButtonText: this.$t("confirm"),
cancelButtonText: this.$t("cancel"),
type: "warning",
}
)
.
then(() => {
this.$http
.delete("/vod/mrcategory", {
data: [this.DATA.id],
})
.then(({ data: res }) => {
if (de !== 0) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。