element 表格绑定动态变量且具备selection列的批量删除功能

本文介绍了在使用Element UI时遇到的一个问题:表格数据动态加载,带有selection列,批量删除功能失效。问题在于表格的复选功能会执行两次,导致批量删除按钮始终不可用。解决方案包括移除事件对变量的操作,以及通过watch监听数据变化。最终通过监听clientAllData和currentPage的变化,动态更新表格数据,实现了有效的批量删除功能。
摘要由CSDN通过智能技术生成

功能介绍:对表格中的数据实现批量删除的功能。表格数据众多,利用分页组件进行分页显示,批量删除按钮在默认状态下是不可用的,当selection列有选中的数据时批量删除按钮可用。

示例代码:

<template>
	<div>
	  <!--批量删除按钮-->
	  <el-button :disabled="isDisabled" type="danger" @click="multipleDelete">批量删除</el-button> 
	  
	  <!--表格-->
	  <el-table
	  :data="clientAllData.slice(sizePerPage*(currentPage-1),sizePerPage*currentPage)"
	  @selection-change="selectionChange"> 
	     <el-table-column type="selection" align="center"></el-table-column>
	     <!--有若干条 el-table-column -->
	  </el-table>
	  
	  <!--分页-->
	  <el-pagination :page-size="sizePerPage" :total="clientAllData.length" @current-change="currentChange"></el-pagination>
	
	<
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue和Element UI的Table组件中实现分页复选功能,可以按照以下步骤进行操作: 1. 在Vue组件中引入Element UI的Table和Checkbox组件: ```javascript import { Table, Checkbox } from 'element-ui'; ``` 2. 在data中定义需要用到的变量: ```javascript data() { return { // 表格数据 tableData: [], // 选中的行数据 selectedRows: [], // 是否全选 isAllSelected: false } } ``` 3. 在模板中使用Table和Checkbox组件,并设置相应属性和事件: ```html <template> <div> <el-table :data="tableData" @row-click="handleRowClick"> <el-table-column type="selection" width="55"> <template slot-scope="scope"> <el-checkbox v-model="selectedRows" :label="scope.row" @change="handleCheckboxChange"></el-checkbox> </template> </el-table-column> <!-- 其他定义--> </el-table> </div> </template> ``` 4. 在methods中定义事件处理函数: ```javascript methods: { // 单击行选中/取消选中 handleRowClick(row) { const index = this.selectedRows.indexOf(row); if (index > -1) { this.selectedRows.splice(index, 1); } else { this.selectedRows.push(row); } }, // 全选/取消全选 handleCheckboxChange(value) { if (value.length === this.tableData.length) { this.isAllSelected = true; } else { this.isAllSelected = false; } } } ``` 5. 在模板中使用全选Checkbox,并绑定isAllSelected属性: ```html <el-checkbox v-model="isAllSelected" @change="handleSelectAllChange">全选</el-checkbox> ``` 6. 在methods中定义全选Checkbox的 change 事件: ```javascript methods: { // 全选/取消全选 handleSelectAllChange(value) { if (value) { this.selectedRows = [...this.tableData]; } else { this.selectedRows = []; } } } ``` 以上就是在Vue和Element UI的Table中实现分页复选功能的步骤。通过监听行点击事件,可以实现点击行选中/取消选中的功能;通过绑定Checkbox的v-model和change事件,可以实现全选功能;通过管理选中的行数据,可以获取用户选择的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值