Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中

最新推荐文章于 2024-05-22 17:04:38 发布

朝阳39

最新推荐文章于 2024-05-22 17:04:38 发布

阅读量3k

点赞数 1

分类专栏： # Element UI # 已归档链接文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_41192489/article/details/125937391

版权

已归档链接同时被 2 个专栏收录

282 篇文章 15 订阅

订阅专栏

Element UI

44 篇文章 14 订阅

订阅专栏

该博客介绍了如何在Vue中利用Element UI的表格组件监听select事件，实现用户手动勾选数据行时的选中和取消选中功能。核心代码展示了在选中事件触发时，通过比较rows和row来判断选中状态，并更新selected变量。示例代码包括模板、脚本和样式部分，展示了一个完整的Vue组件实现。

摘要由CSDN通过智能技术生成

实现原理

监听手动勾选数据行的 Checkbox时触发的select事件，根据参数 rows 和 row 计算出勾选操作为选中还是取消选中。

rows —— 所有选中行组成的数组
row —— 勾选行的数据

核心代码

 @select="select"

 select(rows, row) {
   // true为选中, 0或false为取消选中
   this.selected = rows.length && rows.indexOf(row) !== -1;
 },

完整范例

在这里插入图片描述

<template>
  <div class="mainBox">
    <el-table ref="multipleTable" :data="tableData" @select="select">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
    </el-table>
    <p v-if="selected !== null">
      当前操作为：{{ selected ? "选中行" : "取消选中" }}
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: null,
      tableData: [
        {
          name: "王小虎",
          age: 10,
        },
        {
          name: "张三",
          age: 20,
        },
        {
          name: "李四",
          age: 30,
        },
      ],
    };
  },
  methods: {
    select(rows, row) {
      // true为选中, 0或false为取消选中
      this.selected = rows.length && rows.indexOf(row) !== -1;
    },
  },
};
</script>
<style  scoped>
.mainBox {
  margin: 30px;
}
</style>