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

1、点击整行时触发的事件 @row-click2、获取列表选中的数据一定要用@select-change，不能用@select，因为@select只有点每行前面的选框才会触发这个事件，而@select-change不管选择任意地方都能选中并且触发它，用来接收选中的数据。3、handleSelectable 有些数据不能被选中，需要禁用<el-tableref="multipleTable":

最胖的小仙女

8737人浏览 · 2022-04-25 09:46:35

最胖的小仙女 · 2022-04-25 09:46:35 发布

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
    }