<template>
<div>
<div style="height: 440px; overflow-y: auto; overflow-x: hidden">
<el-tree
ref="tree"
:props="props"
:load="loadNode"
node-key="id"
:default-checked-keys="checkedId"
lazy
show-checkbox
>
</el-tree>
</div>
<template slot="footer">
<el-button type="success" size="medium" @click="onSubmit">保存</el-button>
<el-button type="danger" size="medium" @click="visible = false"
>取消</el-button
>
</template>
</div>
</template>
<script>
export default {
data() {
return {
props: {
label: "name",
children: "zones",
isLeaf: "leaf",
},
// 默认选中的
checkedId: [],
};
},
methods: {
loadNode(node, resolve) {
let params;
if (node.level == 0) {
params = {
// 传参
};
} else {
params = {
// 传参
};
}
getTree(params).then((data) => {
if (data.resultdata.length > 0) {
if (data.resultdata[0].length > 0) {
data.resultdata[0].forEach((item) => {
this.checkedId = item.check;
});
}
this.ChildNode(node, 100);
resolve(data.resultdata);//数据,这是懒加载的数据拿取
} else {
resolve();
}
});
},
ChildNode(node, time) {
setTimeout(() => {
let count = 0;
node.childNodes &&
node.childNodes.forEach((cell) => {
if (cell.data.check == 1) { //判断的是如果check等于1那么就让他高亮
count += 1;
cell.checked = true;
} else {//否则不高亮
cell.checked = false;
}
});
if (count != 0 && node.childNodes.length != count) {
node.checked = false;
node.indeterminate = true;
}
}, time);
},
// 表单提交
async onSubmit() {
this.loading = true;
const res = this.$refs.tree.getCheckedNodes();
const semi = this.$refs.tree.getHalfCheckedKeys();
let arr = "";
res.forEach((item) => {
arr = arr + "," + item.id;
});
this.dataForm.modulesString = arr;
this.dataForm.semiId = semi;
const result = await save(this.dataForm);
if (result.result) {
this.checkedId = res.map((node) => node.id);
this.$emit("从父组件传过来的刷新方法");
this.$message({
type: "success",
message: "操作成功",
});
}
},
},
};
</script>
<style>
</style>
el-tree的高亮,点击保存之后再次打开el-tree的弹框,高亮显示
最新推荐文章于 2025-05-27 22:18:12 发布