博客

表格数据

<el-table
      border
      :data="tableData"
      row-key="id"
      ref="multiTable"
      @select="selectChange"
      @select-all="selectAllChange"
      @selection-change="handleSelectsb"
      :expand-row-keys="expandRowKeys"
      :tree-props="{ children: 'children', hasChildren: 'haschildren' }"
    >
      <el-table-column type="selection" width="55" :selectable="selected"></el-table-column>
      <el-table-column prop="mc" label="名称" width="300" :show-overflow-tooltip="true" />
      <el-table-column prop="ms" label="描述" :show-overflow-tooltip="true" />
      <el-table-column prop="sstdmc" label="所属团队" width="200" :show-overflow-tooltip="true" />
    </el-table>

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--
          }
        }
      }
    },