效果:
<el-dialog
v-dialogDrag
:close-on-click-modal="false"
title="新增部门"
:visible.sync="area_dialog"
append-to-body
width="30%"
top="10%"
:before-close="handleClose"
>
<div
style="overflow:auto;height:300px;border: 2px solid #99A3BD;margin-top:10px;"
v-loading="loading"
element-loading-spinner="el-icon-loading"
element-loading-text="正在加载中.."
>
<el-tree
:data="dataTree"
:props="defaultProps"
node-key="id"
show-checkbox
ref="tree"
:render-after-expand="false"
@check="handleCheck"
@check-change="handleCheckChange"
:filter-node-method="filterNode"
highlight-current
/>
</div>
<el-row :gutter="5" class="dialogOpeateBtn">
<el-col :span="24">
<el-button @click="handleClose">关 闭</el-button>
<el-button type="primary" @click="orgsubmit">确 定</el-button>
</el-col>
</el-row>
</el-dialog>
方法:
handleCheck(nodeData, treeChecked) {
let node = this.$refs.tree.getNode(nodeData.id);
if (!node.checked && !node.expanded) {
//将选中的未展开的节点进行展开
console.log(22);
node.expand(function() {
for (let i = 0; i < node.childNodes.length; i++) {
node.childNodes[i].expand();
}
// console.log(33);
});
}
},
handleCheckChange(data, checked, indeterminate) {
if (checked) {
this.$refs.tree.setCheckedKeys([data.id]);
}
},
orgsubmit() {
// let textname = "";
// let depId = "";
if (this.$refs.tree.getCheckedKeys().length <= 0) {
this.$alert("请选择使用区域");
} else {
//将组织机构数据传递到主页面
//清除当前组织机构树状态
console.log(this.$refs.tree.getCheckedNodes())
}
},