vue element tree 在项目中经常会使用到,例如权限配置,组织架构配置,菜单配置等等
注意:check-strictly="true"是取消父子级关联,如果需要父子级关联就删掉这个配置
<el-tree
:data="treeData"
show-checkbox
node-key="id"
ref="tree"
:default-checked-keys="defaultCheckedIds"
:check-strictly="true"
default-expand-all
:props="defaultProps">
</el-tree>
<el-button type="primary" @click="showMask2=false" icon="el-icon-circle-close">取 消</el-button>
<el-button type="success" @click="setAllCheckedKeys" icon="el-icon-finished">全 选</el-button>
<el-button type="info" @click="resetChecked" icon="el-icon-delete">清 空</el-button>
<el-button type="primary" @click="submitTree" icon="el-icon-circle-check">确 定</el-button>
export default {
data() {
return {
treeData: [],
defaultCheckedIds:[],
defaultProps: {
value:'id',
children: 'childrenList',
label: 'name'
}
}
},
methods:{
//初始化tree data数据
initTreeData(){
let params = null;
this.$commonAjax.post('/xxx/xxx', params,
(json)=> {
if (json.code == 0) {
this.treeData = json.content;
} else {
this.$message.error(json.message);
}
},
(error)=> {
this.$message.error("系统繁忙请稍后再试!");
}
);
},
//设置tree checkbox 选中
setAllCheckedKeys() {
this.$refs.tree.setCheckedNodes(this.treeData);
},
//清空tree checkbox
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
//获取选中的checked id,注意返回的是long id 数组
getDefaultCheckedIds(){
let params = null;
this.$commonAjax.post('/xxx/xxx', params,
(json)=> {
if (json.code == 0) {
this.defaultCheckedIds = json.content;
} else {
this.$message.error(json.message);
}
},
(error)=> {
this.$message.error("系统繁忙请稍后再试!");
}
);
},
//点击确定按钮提交后台
submitTree(){
//这里获取的tree 选中的 checked 返回的是 id 数组
let ids = this.$refs.tree.getCheckedKeys();
if(ids.length == 0){
this.$message.error("请配置权限再提交!");
return;
}
let params = {
roleId:this.currentRoleId,
roleCode:this.currentRoleCode,
ids:ids
}
this.$commonAjax.post('/xxx/xxx', params,
(json)=> {
if (json.code == 0) {
this.$message.error("权限配置成功");
} else {
this.$message.error(json.message);
}
},
(error)=> {
this.$message.error("系统繁忙请稍后再试!");
}
);
},
},
mounted() {
this.initTreeData();
}
}