element树形表格 多选和单选(多选时把子节点一起勾上)

表格数据


      
      
      
      
    

data数据

tableData:[]

js数据

    /**
     * 用于树形表格多选,单选的封装
     * @param selection
     * @param row
     */
    selectChange(selection, row) {
      this.unique(selection, 'id')
      // 如果selection中存在row代表是选中,否则是取消选中
      if (
        selection.find(val => {
          return this.getDataId(val) === this.getDataId(row)
        })
      ) {
        if (row.children) {
          //注意这里的children是后台返回数据的children字段
          row.children.forEach(val => {
            this.$refs.multiTable.toggleRowSelection(val, true)
            selection.push(val)
            if (val.children) {
              this.selectChange(selection, val)
            }
          })
        }
      } else {
        this.toggleRowSelection(selection, row)
      }
    },

    /**
     * 用于树形表格多选, 选中所有
     * @param selection
     */
    selectAllChange(selection) {
      // 如果选中的数目与请求到的数目相同就选中子节点,否则就清空选中
      if (selection && selection.length === this.tableData.length) {
        this.unique(selection, 'id')
        selection.forEach(val => {
          this.selectChange(selection, val)
        })
      } else {
        this.$refs.multiTable.clearSelection()
      }
    },

    // 选择改变
    handleSelectsb(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.multipleSqs = selection.length == 1 ? false : true
      this.selections = selection
      this.unique(this.selections, 'id') //这里有一个问题就是这样点选完之后,数据有重复,所以根据id手动去重,期待优化
    },

    /**
     * 切换选中状态
     * @param selection
     * @param data
     */
    toggleRowSelection(selection, data) {
      if (data.children) {
        //注意这里的children也是后台返回数据的children字段
        data.children.forEach(val => {
          this.$refs.multiTable.toggleRowSelection(val, false)
          if (val.children) {
            this.toggleRowSelection(selection, val)
          }
        })
      }
    },

    getDataId(data) {
      return data['id']
    },

    //数组去重
    unique(arr, i) {
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i].id == arr[j].id) {
            arr.splice(j, 1)
            j--
          }
        }
      }
    },

你可能感兴趣的:(javascript,前端,vue.js)