this.multipleSelection获取id集合

 

我们在使用Element-ui的el-table的时候,需要获取选中后的改行数据的内容,比如id。我们要做的是基于vue Element-ui的el-table多选框,this.multipleSelection 获取id集合。

基于vue Element-ui的el-table多选框ID

如下代码获取的是Element-ui的el-table本身的ID。 给表格头部添加选择方法:

<el-table
              ref="multipleTable"
              @selection-change="getSelect"
              border
              style="width: 100%;height: 100%"
              height="100%"
              :data="buildingRankList"
            >
              <el-table-column type="selection" width="40"></el-table-column>
</el-table>

如下:在data中定义数据


multipleSelection: [], *// 选中的数据二维数组*

ids: [], *// 选中的数据id数组*

在JavaScript方法部分:

getSelect(){
  let ids = []
  this.multipleSelection.forEach(L => L.forEach(M => ids.push(M.projectBaseId)))
  this.ids = ids
  console.log(this.ids.length, 'inder')

}

获取改行数据的ID

其实更多时候我们是要获取数据中的id,所以代码如下,这样获获取的this.device_ids就是一个数组。

getSelect(val) {
      this.multipleSelection = val;
      let ids = this.multipleSelection
        .map(({ device_id }) => device_id)
        .join(",");
      this.device_ids = ids.split(","); // data中定义device_ids

    },

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。