el-table改造之后多选功能无法实现?

背景:
el-table组件要实现以下需求:
如果返回的数据rowLocked = 1 则本行最前面不可被选中,显示icon,如果rowlocked !=1 则本行之前可以出现checkbox 可以多选,进行批量删除

代码如下

`

 <el-table
    :data="tableData"
    :key="key"
    ref="multipleTable"
    border
    highlight-current-row
    style="width: 100%;margin-top:20px;"
    class="success"
    stripe
    @selection-change="handleSelectionChange"
    @sort-change="sortChange"
  >
    <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="lockImg" v-else />
      </template>
    </el-table-column>

`

 @change="handleSelectionChange(scope.row)

现在想在这个方法里面实现多选 把被选中的行的id 放到一个待删除的数组 selectedId里面,现在无法实现,求教一下该如何实现

`

 //多选
handleSelectionChange(val) {
  console.log(val);
},

`

之前没进行改造的时候,沿用了el-table本身的多选是没有问题的 因为这个时候val 是一个数组 可以用map进行循环遍历 但是上一个方法里面使用如下方法,提示map not a function 因为看了一下返回的val是一个 对象 并非一个数组
`

//多选
handleSelectionChange(val) {
  this.selectionId = val.map(item => {
    return item.id;
  });
},

`

阅读 305
评论
    1 个回答
    • 8.5k
    <el-checkbox
        v-if="scope.row.rowLocked !==1"
        @change="handleSelectionChange(scope.row)"
        v-model="scope.row.checked"
    />

    你先思考一下这段代码,既然已经把checkbox绑定在scope.row.checked上,又把scope.row作为参数传进去意义何在呢?根本不可能通过这个对象得到你想要的值啊
    不过我们既然知道是绑定在checked字段上,想拿到已选中字段可以从tableData上面筛选

    @change="handleSelectionChange(tableData.filter(row => row.checked))
      撰写回答

      登录后参与交流、获取后续更新提醒