element ui 表格全选与否

最新推荐文章于 2025-07-22 11:14:32 发布

原创最新推荐文章于 2025-07-22 11:14:32 发布 · 1.5w 阅读

1 ·

CC 4.0 BY-SA版权

element ui 专栏收录该内容

5 篇文章

订阅专栏

当使用Element UI的表格组件并有多条数据时，遇到全选和反选操作导致的异常问题。本文介绍了在模板、JS和界面部分的解决方法，确保在选中单条数据后，全选和反选功能仍能正常工作。

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

虽然element ui 的接口提供了全选与反选，可是当我有多条数据时，

选中了某一条，再点全选/反选按钮时，会出现异常情况。下面是解决办法，

template部分：

<template>
  <div class="operator">
    <el-button @click="toggleSelect(tableData)" size="mini">全选/反选</el-button>
    <el-button @click="deleteSelect" type="danger" size="mini">删除</el-button>
  </div>
</template>

js部分

<script>
  export default {
    data() {
      return {
        // 表格数据
        tableData: [
          {
            userCode: '8511110101',
            name: '王1虎',
            roomNumber: '17-203',
            userType: '自付',
            heatingArea: '80㎡',
            year: '2016-2017'
          }
        ],
        // 列表全选与否
        allSelect: false
      }
    },
    methods: {
      toggleSelect(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
          })
          this.allSelect = !this.allSelect
        }
      }
    }
  }
</script>