el-table的多选功能

前端小凯

于 2024-08-15 17:39:59 发布

阅读量299

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_43235503/article/details/141227888

版权

html：

<el-table :data="list" row-key="id" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"/>
</el-table>

js变量：

data () {
    return {
       // 多选选择的数组
       selectArray: []
    }
},

js方法：

/** 
 * 多选
 */
handleSelectionChange(data) {
  let res = this.selectArray;
  this.list.forEach((item, index) => {
    this.selectArray.forEach((items, indexs) => {
      if (item['id'] == items) res.splice(indexs, 1);
    });
  });
  if(data.length > 0) {
    data.map(item => {
      res.push(item.id);
    });
  };
  this.selectArray = res;
}

效果图：