elementul el-table表格如何在取消勾选时获取当前行数据

接口写好了吗

已于 2022-04-12 13:38:12 修改

阅读量5.6k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：功能实现文章标签： javascript el-table 取消勾选 elementul

于 2021-11-10 11:18:06 首次发布

本文链接：https://blog.csdn.net/seeeeeeeeeee/article/details/121244314

功能实现专栏收录该内容

157 篇文章

订阅专栏

本文介绍了解决在Vue的el-table组件中，如何在用户取消勾选时获取当前行数据的问题。通过`handleSelect`方法利用includes()判断并获取未勾选项的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些时候需要用到在取消勾选时获取当前行的数据，但是正常的用法你取消后返回给你的是一个空数组。

解决办法

这里我就直接把elementul上的多选表格代码直接复制过来演示了。如果想要看看效果，可以直接复制这一段代码找个空白的页面放进去看看log的信息就知道了。

老规矩，解释一下，防止新人看不懂：

这里主要是靠在el-table上用@select="handleSelect"方法实现的
下面handleSelect方法中，list参数代表所有勾选数据，item参数代表当前点击的数据。
arguments是一个类数组对象，如果不理解，具体说明自己百度看看这是个啥，这可是很好用的。
includes() 方法用于判断字符串是否包含指定的子字符串。
如果找到匹配的字符串则返回 true，否则返回 false

逻辑

上面解释完了，应该也理解逻辑了吧
很简单，就是通过includes()判断所以勾选的数据内是否包含当前点击的项，如果没有就返回false。那你已经取消勾选了自然就不包含，就是false。那就if判断一下，如果是false也就是你取消勾选了就把当前的数据存到某个变量之类的，你就拿到了数据了。这个可以用item拿也可以直接arguments[1]也能拿到

<template>
  <div>
      <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @select="handleSelect">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎6',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎7',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },

    methods: {
   		//这个不用管
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      
      //重点是这个方法。list是所有勾选数据，item是当前点击的数据。
      handleSelect(list, item){
          if(list.includes(item)){
              //勾选时做的事
              console.log('成功');
          }else{
              //取消勾选时做的事，arguments[1]是当前取消勾选的项
              console.log(arguments[1]);
          }
            console.log('handleSelect', arguments,list.includes(item))
        },
    }
}
</script>

<style>

</style>