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>

界面部分

element ui 表格全选与否相关推荐

Element UI checkbox 全选操作分析
引入checkbox 组件 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" ...
element ui表格勾选后勾选框置灰，不可再勾选
首先在 type="selection"的表格列里写上方法:selectable="checkSelectable" <el-table-column t ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
element 表格全选,，翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 第一步操作思路:全选操作反过 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
elementui[el-table]表格全选操作以及翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 总体来看无非就是几步操作而已. ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
element UI 表格做下滑滚动效果，请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...

element ui 表格全选与否

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

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

template部分：

js部分

界面部分

element ui 表格全选与否相关推荐

最新文章

热门文章