element ui 表格全选与否

虽然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>



界面部分


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值