el-tree用法
<el-Tree
id="userMtree"
ref="tree"
class="user-manage-tree"
:data="treeData"
options="{options}"
show-checkbox
nodeKey="id"
default-expand-all
@check-change="checkChange"//节点选中状态发生变化时的回调
:expand-on-click-node="false"
@node-click="handleOrganizationNodeClick"//节点被点击时的回调
/>
数据：
treeData: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
{
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",
},
],
},
]
方法：
/**、点击树节点触发事件 */
handleOrganizationNodeClick(obj) {
this.currentOrganization = obj;
if (!obj.children) {
obj.children = [];
}
if (obj.children.length === 0 && obj.HasChild) {
// f发起请求
let resultRegionInfo = this.asyncTreeData(obj.Id);
resultRegionInfo.then((data) => {
obj.children = data.children;
this.organizationTableData = obj.children;
});
}
this.getDeviceInfoList();
},
//节点被选中和取消时触发
checkChange(data, checked) {
// let userMtree = document.getElementById("userMtree");
// userMtree.firstElementChild.classList.remove("is-current");
// this.checkedID = data.id;
console.log("树形结构=" + JSON.stringify(data) + "******" + checked);
// this.$emit("emitClickNode", data);
},
/**
* 通过tree来设置勾选，这里只需传入id即可
*/
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([6, 9]);
},
/**
* 清空所有选中，清空选中数组数据即可
*/
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},