el-table选框选中和整行选中

1、点击整行时触发的事件 @row-click

2、获取列表选中的数据一定要用@select-change,不能用@select,因为@select只有点每行前面的选框才会触发这个事件,而@select-change不管选择任意地方都能选中并且触发它,用来接收选中的数据。

3、handleSelectable 有些数据不能被选中,需要禁用

 <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :header-cell-style="{'text-align':'center', 'background': '#f8f8f8', 'color': '#333', 'font-weight': '500'}"
        :cell-style="{'text-align':'center'}"
        highlight-current-row
        @row-click="handleRowClick"
        @select-change="handleSelectRow"
      >
        <el-table-column type="selection" width="55" :selectable="handleSelectable"></el-table-column>
        <el-table-column  prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="orgName" label="地区"></el-table-column>
        <el-table-column prop="uid" label="uid"></el-table-column>
      </el-table>


// 部分数据不能被选,选框禁用
handleSelectable (row, index) {
      console.log(this.parentTableData, this.parentTableData.includes(row.uid), row.uid)
      if (!this.parentTableData.includes(row.uid)) {
        return true
      }
    },

// 部分数据不能被选,整行不能选中
handleRowClick (row) {
      if (!this.parentTableData.includes(row.uid)) {
        this.$refs.multipleTable.toggleRowSelection(row)
        // 获取当前选中的数据
        const _selectData = this.$refs.multipleTable.selection
        this.handleSelectRow(_selectData)
      }
    },

 handleSelectRow (row) {
      this.tableSelectedRows = row
    }

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值