【vue】处理数组,无关联父id的情况下,根据特定条件区分父子项,单独给子项加事件

先说下具体的场景,有个列表数组,有一列是科目代码,这个和财务息息相关,财务里还有借方,贷方,利润表之类的,这里不详细阐述了。

科目代码的规律是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
    },

猜你喜欢

转载自blog.csdn.net/weixin_49668076/article/details/130575552