vue3获取选中的el-table行数据方式
作者：海天胜景
在Vue 3中，如果你正在使用<el-table>组件（来自Element Plus或Element UI库），并希望获取被选中的行数据，你可以通过几种不同的方式来实现。
以下是几种常见的方法：
方法1：使用@selection-change事件
<el-table>组件提供了一个@selection-change事件，该事件会在选中项发生变化时触发，你可以在这个事件的处理函数中获取当前的选中行数据。
首先，确保你的<el-table>组件的type属性设置为selection，这样就会显示复选框，允许用户选择行。
<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
style="width: 100%"
ref="multipleTable"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
property="date"
label="日期"
width="120">
</el-table-column>
<el-table-column
property="name"
label="姓名"
width="120">
</el-table-column>
<!-- 其他列 -->
</el-table>
</template><script setup>
import { ref } from 'vue';
const tableData = ref([/* 你的数据 */]);
const selectedRows = ref([]);
const handleSelectionChange = (val) => {
selectedRows.value = val; // val是当前选中行的数组
};
</script>方法2：使用Table实例的selection属性
如果你需要通过编程方式访问或操作选中的行，你可以使用<el-table>组件的ref属性来引用该组件的实例，然后通过该实例的selection属性来获取选中的行数据
<template>
<el-table
:data="tableData"
ref="multipleTableRef"
style="width: 100%"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<!-- 列定义 -->
</el-table>
<el-button @click="getSelectionRows">获取选中行</el-button>
</template><script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus'; // 或 'element-ui' 取决于你使用的库版本和包名
const tableData = ref([/* 你的数据 */]);
const multipleTableRef = ref(null); // 通过ref获取组件实例
const getSelectionRows = () => {
if (multipleTableRef.value) { // 检查ref是否已正确引用组件实例
const selectedRows = multipleTableRef.value.selection; // 获取选中行数据数组
console.log(selectedRows); // 处理或显示选中行数据
}
};
</script>在Element Plus中，直接通过selection属性访问选中行的功能已经被移除。
你应该使用getSelectionRows方法（如方法1所示）来处理这一需求。
如果你使用的是Element UI，那么上述方法2是可行的。但在Element Plus中，推荐使用方法1。
方法3：使用v-model:checked-rows.sync（已废弃）或v-model:checked-rows（Element Plus）
虽然在一些旧版本的Element UI中，你可以使用v-model:checked-rows.sync（或在Element Plus中为v-model:checked-rows）来直接绑定选中的行数据，但这种方法在Vue 3和Element Plus中已经被废弃或更改。推荐使用上述方法1来处理这个问题。
推荐使用方法1（通过@selection-change事件处理选中行数据），这是最通用且符合Vue 3和Element Plus最新实践的方法。如果你使用的是Element UI并且想要通过实例直接访问选中行，请确保你的项目依赖和代码示例匹配正确的库版本。对于Element Plus，请遵循最新的API和最佳实践。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。