程序地带

element tree封装为可控制只可选末级或都可选(2)


接上一篇文章改点需求 要求:把只能选择一个末级节点时,其他设置为不可选的地方改为可以再选择其他节点只不过替换掉原来的对节点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()
}
})
},

效果录屏: 在这里插入图片描述


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40636998/article/details/111246312

随机推荐

vs写第一个Arduino项目,使用语音模块LD3320控制舵机

vs写第一个Arduino项目,使用语音模块LD3320控制舵机

1.新建一个项目创建好了编译也没有问题然后把你的代码丢进去就行了这里你会发现,有很多波浪线,那是因为你还没有调用库不过这种方法有一种弊端,就是调用时很容易把库文件给修改了,所以我推荐把库文件放到项目中...

qqrowosr 阅读(564)

sql 根据时间统计

SELECTDAY(create_time)ASDAY,COUNT(1)ASCOUNT,SUM(price)FROMordersWHEREMONTH(create_time)=MONTH(NO...

为月提笔_ 阅读(307)

细雨算法

在我们优化当中,特别是一些刚入门的seo人员,为了营销,为了转化,就在网站网页里面到处乱插广告,如标题多次出现核心关键词,网页里面...

HayasakaAi520 阅读(879)