【ElementUI】获取表格选中行的id数组

8 篇文章 0 订阅
5 篇文章 0 订阅
  1. 如何获取到 ElementUI 中 表格(table) 组件前 多选框被选中后的id数组呢?
    在这里插入图片描述
  2. 使用 table 组件的@selection-change事件监听当多选框被选中时的动作,获取到当前被选中的对象,将对象中的id取出之后放到新的数组中即可。
<el-table
        ref="multipleTable"
        :data="merchantManage"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="tableSelected">
data ()	 {
	return {
	this.isDelBatchMerchantBtn
			}
		}
	/**
       * 获取表格多选 选中的商家信息
       */
      tableSelected (val) {
        // 去重获取被选中的id值存入到数组中
        for (let selectedItem of val) {
          this.merchantSelectedIds.push(selectedItem.id)
        }
        // 选中多选之后 删除选中按钮修改为可用状态
        this.isDelBatchMerchantBtn = !this.isDelBatchMerchantBtn
      }
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在 Element UI 的 table 组件中,可以使用 v-model 绑定一个变量来获取中的行。例如: ``` <el-table v-model="selectedRows" @selection-change="handleSelectionChange"> ``` 其中 `selectedRows` 是用来存储中行的变量,`handleSelectionChange` 是在中行改变时触发的事件。 在 `handleSelectionChange` 方法中,可以访问到当前中的行,例如: ``` handleSelectionChange(val) { console.log(val) } ``` 上面代码中的 val 就是当前中的行,可以对其进行处理。 还可以使用ref获取表格组件,然后使用$refs.tableRef.store.states.selection 来获取中行 ``` <el-table ref="tableRef" @selection-change="handleSelectionChange"> ``` 在handleSelectionChange中 ``` handleSelectionChange(val) { console.log(this.$refs.tableRef.store.states.selection) } ``` 上面代码中 this.$refs.tableRef.store.states.selection 就是当前中的行 ### 回答2: ElementUI是一款基于Vue.js的组件库,其中包括了Table表格组件。在项目中经常需要获取表格中的行,本篇就要介绍如何使用ElementUI Table组件获取中行。 首先需要在Table组件中设置一个属性:`@selection-change`。该属性会在中项发生改变时触发一个事件,我们可以在事件中获取中的行数据。 示例代码如下: ```html <el-table @selection-change="handleSelectionChange" :data="tableData" v-loading="tableLoading" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 在该示例代码中,我们还使用了`:data`属性和`v-loading`指令来设置表格的数据和表格加载状态。 接下来要实现`handleSelectionChange`方法来获取中的行数据。该方法接收一个参数`selectedRows`,它是一个数组,包含了当前中的所有行数据对象。我们可以用这个数组获取中行的数据。 ```javascript methods: { handleSelectionChange(selectedRows) { console.log(selectedRows); // 打印中的行数据 } } ``` 至此,我们已经实现了ElementUI Table获取中行的功能。 如果我们还想让择框的勾状态和某些操作按钮的禁用状态与中的行数据绑定,我们可以通过`:row-key`和`:row-selection`属性实现中行的状态绑定。具体可以参考ElementUI官网提供的Table组件文档:https://element.eleme.cn/#/zh-CN/component/table#hang-shu-ju-kong-zhi。 总之,配合`@selection-change`事件和`handleSelectionChange`方法,我们可以在ElementUI Table组件中非常方便地获取中行数据。 ### 回答3: ElementUI是一套基于Vue.js框架的组件库,为我们提供了一些非常便捷的组件和方法,其中表格(Table)是非常常用的组件之一,而获取表格中的行也是我们在实际开发中经常需要的功能。下面是一种简单的方法来实现ElementUI表格获取中行的功能: 1. 首先,在HTML模板中定义表格及相关的变量,代码如下: <template> <div> <el-table ref="table" :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" label="Name" width="180"> </el-table-column> <el-table-column prop="age" label="Age" width="100"> </el-table-column> <el-table-column prop="address" label="Address"> </el-table-column> </el-table> <div v-show="selectionList.length"> <p>Selected: {{ selectionList }}</p> </div> </div> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 26, address: 'New York' }, { name: 'Jane', age: 24, address: 'Paris' }, { name: 'Tom', age: 32, address: 'London' }, { name: 'Mike', age: 29, address: 'Sydney' }, ], selectionList: [] }; }, methods: { handleSelectionChange(val) { this.selectionList = val.map(item => item.name); } } }; </script> 2. 在data中定义一个空数组selectionList,用于存放中的行。 3. 在el-table中设置@selection-change事件,当用户在表格中或取消中行时触发。在事件处理函数handleSelectionChange中,我们可以通过参数val获取当前中的行的信息(数组形式),然后将中行的名称存入selectionList数组中。 4. 在模板中展示中的行信息。 实现以上代码后,我们在表格择行,就可以实现获取中行信息的功能。这种方法适用于需要获取或多表格中行信息。可以根据实际需要对代码进行修改,例如通过表格数据的id等唯一标识进行操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值