先说下具体的场景,有个列表数组,有一列是科目代码,这个和财务息息相关,财务里还有借方,贷方,利润表之类的,这里不详细阐述了。
科目代码的规律是101,101001,101002,102,102001,102002等
其中101是一级科目,以101开头的是二级科目,依次类推,我这里只涉及到二级科目
现在需求是,如果一级科目下有二级科目的,一级科目不允许勾选,只可以勾选二级科目,如果一级科目下无二级科目,一级科目可以点击
代码如下:
this.tableData = this.groupDeal(this.tableData, 'accountCode')//传数组和对应字段名
groupDeal(arr, property) {
if (arr.length === 0) return
let keyword = arr[0][property]//先获取第一项对应字段的值
let num = 0 //定义计数器
arr[0].isClick = false //第一项的是否可以点击变量设为false
for (let i = 1; i < arr.length; i++) {
const item = arr[i]
if (item[property].indexOf(keyword) === 0) {//子项以父项的三位数为开头,为0则是子项
num++ //子项加1
arr[i].isClick = true //子项是否可以点击变量为true
} else {
//能走else的说明都是父项
if (i === arr.length - 1) {//如果为数组最后一项设为true,最后一项要么是子项要么是无子项的父项,肯定是可以点击的
arr[i].isClick = true
}
keyword = item[property]
if (num === 0) {//如果num为0,说明前面的项没有走num++,即没有孩子,上一级是父项
arr[i - 1].isClick = true //将上一项设为true
} else {
arr[i].isClick = false //如果num不为0,说明上一个父子项结束了,这里是新的父项,新父项初始化要设为num=0,且isClick为false
num = 0
}
}
}
return arr
},
在row-click事件中,加个判断
if (!row.isClick) return
this.$refs.standTables.toggleRowSelection(row)
如果一级科目下有二级科目的,一级科目不允许勾选,只可以勾选二级科目,如果只有这一个条件的话
groupDeal(arr, property) {
if (arr.length === 0) return
let keyword = arr[0][property]
arr[0].isSon = false
for (let i = 1; i < arr.length; i++) {
const item = arr[i]
if (item[property].indexOf(keyword) === 0) {
arr[i].isSon = true
} else {
keyword = item[property]
arr[i].isSon = false
}
}
return arr
},