实现效果:
如上图所示,实现el-tree的基本使用,回显及联调。
1.点击弹框弹出样式,node-key是id,与后端字段名对应
{{ t('exampleDemo.save') }}
{{ t('dialogDemo.close') }}
2.ref声明,label是文字显示,填写与后端返回数据文字对应的字段名
3.点击按钮方法调用接口,展示数据或回显数据
//菜单分配
const menuAssignment = async (row: any) => {
console.log(row, '表格数据')
role1.value = row.roleCode
menuVisible.value = true
const res = await getTree()
.catch(() => {})
.fina服务器托管网lly(() => {})
const res1 = await getMenuList({ roleCode: row.roleCode })
.catch(() => {})
.finally(() => {})
if (res) {
treeData.value = res.rows
if (res1) {
// 回显选中菜单
let menuIds = res1.rows
//避免获取不到getNode
setTimeout(() => {
服务器托管网 menuIds.forEach((item: any) => {
const node = treeRef.value.getNode(item)
if (node.isLeaf) {
treeRef.value.setChecked(item, true)
chooseKeys.value.push(item)
}
})
}, 100)
}
}
}
4.选中数据调用check方法,将选中的子节点和父节点连接起来存放到chooseKeys数组中
const boxCheck = () => {
let checkedKeys = treeRef.value.getCheckedKeys()
let halfCheckedKeys = treeRef.value.getHalfCheckedKeys()
chooseKeys.value = checkedKeys.concat(halfCheckedKeys)
}
5.点保存将数据传到后端(传参根据后端需求更改)
//菜单保存
const saveMenu = async () => {
// const elTableExpose = await getElTableExpose()
ElMessageBox.confirm('确定要保存吗?', '提醒', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
saveLoading.value = true
const para = {
roleCode: unref(role1),
// ...multipleSelection.value
rightCodes: chooseKeys.value
}
await saveMenuRole(para).finally(() => {
saveLoading.value = false
})
ElMessage({
type: 'success',
message: '保存成功'
})
getList()
menuVisible.value = false
})
.catch(() => {
ElMessage({
type: 'info',
message: '保存失败'
})
menuVisible.value = false
})
}
最后就完成啦
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: Asp-Net-Core开发笔记:API版本管理
前言 对于Web API应用程序而言,随着时间的推移以及需求的增加或改变,API必然会遇到升级的需求。事实上,Web API应用程序应该从创建时就考虑到API版本的问题。业务的调整、功能的增加、接口的移除与改名、接口参数变动、实体属性的添加、删除和更改等都会改…