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

表格数据

<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--
          }
        }
      }
    },
  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue的el-table表格中,可以通过以下两种方式实现复选框的勾选打印: 1. el-table自带的复选框,使用handleSelectionChange方法获取勾选的数据[^1]。 ```html <template> <el-table :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" align="center"></el-table-column> ... </el-table> </template> <script> export default { data() { return { tableData: [{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}], selectedData: [] } }, methods: { handleSelectionChange(val) { this.selectedData = val console.log(this.selectedData) } } } </script> ``` 2. 自定义复选框,使用getRowKeys和handleSelectionChange方法获取勾选的数据[^2]。 ```html <template> <el-table :data="tableData" @select="select2" @select-all='selectAll'> <el-table-column type="selection" align="center" width="55"> <template slot-scope="{row}"> <el-checkbox v-model="selectedData" :label="row.id"></el-checkbox> </template> </el-table-column> ... </el-table> </template> <script> export default { data() { return { tableData: [{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}], selectedData: [], printStr: '' } }, methods: { // 获取唯一值,一般都是id getRowKeys(row) { return row.id }, // 全选 selectAll(selection) { selection.forEach(item => { this.selectedData.push(item.id) }) console.log(this.selectedData) }, // 单选 select2(selection, row) { this.selectedData.push(row.id) console.log(this.selectedData) } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值