ant vue树形菜单a-tree回显以及踩坑
废话不多说,直接贴代码html部分<a-form-item:label="$t('grant')":labelCol="{span: 7}":wrapperCol="{span: 10}"><a-tree
·
废话不多说,直接贴代码
html部分
<a-form-item
:label="$t('grant')"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
>
<a-tree
v-model="checkedKeys"
checkable
style="width: 100%"
:tree-data="treeData"
:placeholder="$t('grant')"
v-decorator="['grant', {}]"
@check="onCheck"
>
<span slot="title" slot-scope="{ menuId, value }" style="color: #08c">
</span>
</a-tree>
</a-form-item>
js部分
onCheck(e) {
console.log(e)
},
menuSelect() {
menuSelect().then(result => {
const res = result.data;
if (res && res.code === "00000") {
this.treeData = res.result
} else {
this.$message.error(result.message, 3)
}
})
},
/** 添加角色**/
addRole() {
//清空表单
this.form.resetFields();
//清空选中
this.checkedKeys = [];
//树形菜单渲染
this.menuSelect();
//新增行为
this.action = 'add';
this.visible = true;
},
/** 修改角色**/
editRole(record) {
//编辑行为
if (record) {
this.action = 'edit';
}
//清空选中
this.checkedKeys = [];
//树形菜单渲染
this.menuSelect();
this.visible = true;
//数据回显
this.$nextTick(() => {
this.form.setFieldsValue({ // form表单赋值
id: record.id,
roleName: record.roleName,
remark: record.remark,
});
});
setTimeout(() => { // 添加延时操作,解决'1' does not exist in the tree
//树形菜单回显
this.checkedKeys = record.menuIdList;
},500);
},
treeData数据
[
{
"menuId": 0,
"title": "一级菜单",
"value": 0,
"key": 0,
"children": [
{
"menuId": 1,
"title": "控制台",
"value": 1,
"key": 1,
"children": null
},
{
"menuId": 2,
"title": "系统管理",
"value": 2,
"key": 2,
"children": [
{
"menuId": 3,
"title": "用户管理",
"value": 3,
"key": 3,
"children": null
},
{
"menuId": 4,
"title": "角色管理",
"value": 4,
"key": 4,
"children": null
},
{
"menuId": 5,
"title": "菜单管理",
"value": 5,
"key": 5,
"children": null
}
]
}
]
}
]
回显关键
踩坑部分:报’id’ does not exist in the tree
直接设置一个延时,500ms差不多。设置太短了还是会报’id’ does not exist in the tree
更多推荐
已为社区贡献1条内容
所有评论(0)