elementui-table多选框实现

博客介绍了ElementUI table多选框的实现方法。先给el-table注册引用信息,注册在父组件的$refs对象上,新增标签并添加属性,在methods中调用可获取选定列表数据,类型为数组,还给出了vue相关参考链接。

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

ElementUI table的多选框实现

代码如下:

<el-table 
	:data="tableDatas" 
	ref="multipleTable"
	v-loading="states.isLoading" 
	element-loading-text="努力加载中..." >
	<el-table-column type="selection" width="55"></el-table-column>
</el-table>
  1. 首先使用ref给el-table注册引用信息,引用信息将会注册在父组件的$refs对象上
  2. 新增一个el-table-column标签,并在该标签上添加type="selection"的属性
  3. 在需要用到的methods中调用this.$refs.multipleTable.selection即可获取选定的列表数据,类型为数组类型
const rows = this.$refs.multipleTable.selection;
if(rows.length === 0){
	this.$message.warning( '请选择需要操作的数据' )
	return
}
//选中数据进行下一步处理

关于vue中ref以及$refs的参考:https://www.cnblogs.com/xumqfaith/p/7743387.html

### ElementUI 表格组件中的多选框使用方法 在 ElementUI 的表格 (`el-table`) 组件中实现多选功能非常直观。通过设置 `selection` 类型的列可以轻松启用多选框,允许用户选择一行或多行数据。 #### 基本配置 为了使表格支持多选,需向 `<el-table-column>` 添加属性 `type="selection"` 来定义一列表头作为选择器[^1]: ```html <template> <div> <el-table :data="tableData" style="width: 100%"> <!-- 多选框 --> <el-table-column type="selection" width="55"></el-table-column> <!-- 其他表头字段 --> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> ``` #### 获取已选项 要获取当前被选中的项,可以通过监听事件 `@selection-change` 并处理回调函数来捕获最新的选择状态[^2]: ```javascript <script setup> import { ref } from 'vue' const tableData = ref([ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, // 更多项... ]) // 存储选中的行 let selectedRows = [] function handleSelectionChange(selection) { selectedRows = selection; } </script> ``` 此代码片段展示了如何绑定 `handleSelectionChange` 方法到 `@selection-change` 事件上,从而实时更新所选记录数组 `selectedRows`。 #### 自定义行为 对于更复杂的需求,比如限制最大可选数量或禁用某些行的选择等功能,则可通过自定义逻辑控制每一行是否显示勾选框以及其初始状态等特性[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值