vue + elementui table 如何实现表格行数据的多选

Question

刚刚提问了这个问题

https://segmentfault.com/q/10...

多选的方法无法执行，不知道怎么解决

现在想手写一个表格多选，写到一半 遇到问题，请求帮助

需要实现多选的那一列的数据

 <el-table-column width="55">
              <template slot-scope="scope">
                  <el-checkbox v-if="scope.row.rowLocked !==1" @change="handleSelectionChange(scope.row)" v-model="scope.row.checked"/>
                <img class="lockImg" src="./images/suo.png" v-else />
              </template>
            </el-table-column>
            
            
            
             handleSelectionChange(val) {
      console.log(val);
    }

现在执行handleSelectionChange checkbox无法实现勾选，后续想把多选的数据的row.id 放到一个数组里也不知道该怎么解决

求教一下

Answer 1

把那一行的checked改成true不就妥了

Answer 2

我看了刚才你的功能提供下我的思路：
element的表格可以支持多选，你可以使用官方的demo，然后在状态为禁用的时候去把图片定位放到选择框的上面，然后因为有图标遮挡就也点不到了，就可以实现了又能选又简单。

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
  </el-table>

如果像你现在分开直接用checkbox，是不支持handleSelectionChange方法的，必须自己手写禁用方法

1. 列表项目