帮我写一段vue代码。需求是利用el-tree,父,子节点只能选一个,并把结果赋值在表单的某个字段中
时间: 2024-03-12 10:45:39 浏览: 68
好的,下面是一段简单的Vue代码实现您的需求:
```
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="父子节点选择">
<el-tree
:data="treeData"
:props="defaultProps"
:check-strictly="true"
v-model="checkedKeys"
node-key="id">
</el-tree>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
selectedNode: ''
},
treeData: [
{
id: 1,
label: '父节点1',
children: [
{
id: 2,
label: '子节点1',
},
{
id: 3,
label: '子节点2',
}
]
},
{
id: 4,
label: '父节点2',
children: [
{
id: 5,
label: '子节点3',
},
{
id: 6,
label: '子节点4',
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
},
checkedKeys: []
}
},
watch: {
checkedKeys: function(val) {
// 判断是否只选中了一个节点
if (val.length === 1) {
// 获取选中的节点数据
let node = this.$refs.tree.getNode(val[0]);
// 将选中的节点的label赋值给表单字段selectedNode
this.form.selectedNode = node.label;
} else {
this.form.selectedNode = '';
}
}
}
}
</script>
```
说明:
1. 使用了Element UI的el-tree组件实现树形结构的展示和选择。属性`:check-strictly="true"`表示父子节点只能选一个。
2. 使用了watch监听checkedKeys的变化,当选中节点数量为1时,获取选中节点的label赋值给表单字段selectedNode,否则将selectedNode清空。
3. 代码中的treeData和checkedKeys为示例数据,需要根据实际情况进行修改。
阅读全文