接上一篇文章改点需求
要求:把只能选择一个末级节点时,其他设置为不可选的地方改为可以再选择其他节点只不过替换掉原来的对节点checkedbox的选择.
修改的封装组件的部分method代码:
//点击节点触发
nodeClick(data) {
if (!this.checkBoxFlag) {
this.checkData = []
this.checkData = data
}
},
//获取选择的班组
checkChange(data, node) {
//因为如果父级节点只有两条末级节点数据的话不好控制,所以采用倒序查询赋值
for (let i = node.checkedKeys.length - 1; ; i--) {
//处理清空已选择的节点
if (i < 0) {
this.defaultCheckedKey = []
this.checkData = undefined
break
}
if (node.checkedKeys[i] !== this.defaultCheckedKey[0]) {
// 控制只能push一次
this.defaultCheckedKey = []
this.defaultCheckedKey.push(node.checkedKeys[i])
//记录节点数据,返回给父组件
node.checkedNodes.map((item1) => {
if (item1.id === node.checkedKeys[i]) {
this.checkData = item1
}
})
break
}
}
node.halfCheckedKeys.map((item) => this.defaultKey.push(item))
this.treeKey = new Date().getTime()
this.$nextTick(() => {
this.$refs.tree.filter('')
})
},
//树的查询
filterNode(value, data) {
let filterFlag = true
for (let key in this.filteCondation) {
filterFlag = data[key] === this.filteCondation[key]
if (!filterFlag) break
}
if (!value) return filterFlag
return data[this.treeProps.label].indexOf(value) !== -1 && filterFlag
},
resetForm() {
this.filterText = undefined
},
async open() {
this.defaultCheckedKey = []
const { data } = await request({
url: services[this.service] + this.url,
method: 'post',
data: this.data,
})
this.treeData = this.data1
this.checkData = undefined
//过滤树的数据
this.$nextTick(() => {
this.filterText = ''
})
this.defaultKey.push(this.treeData[0].id)
this.treeData[0].children &&
this.defaultKey.push(this.treeData[0].children[0].id)
this.dconfig.title = '选择' + this.title
// 为表单赋值
this.$refs.dialog.open((cancel) => {
// 提交按钮回调--触发表单的校验以及提交
if (!this.checkData) {
this.$message.error('请选择' + this.title)
} else {
this.$emit('getselecteddata', this.checkData)
cancel()
}
})
},
效果录屏: