vue3獲取選中的el-table行數據方式
在Vue 3中，如果你正在使用<el-table>組件（來自Element Plus或Element UI庫），并希望獲取被選中的行數據，你可以通過幾種不同的方式來實現。
以下是幾種常見的方法：
方法1：使用@selection-change事件
<el-table>組件提供了一個@selection-change事件，該事件會在選中項發(fā)生變化時觸發(fā)，你可以在這個事件的處理函數中獲取當前的選中行數據。
首先，確保你的<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和最佳實踐。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了在Vue.js中使用Mixins的方法，Vue的Mixins是非常實用的編程方式，可以使代碼變得容易理解，有興趣的一起來了解一下2017-09-09
探通過本篇文章給大家探討不同場景下組件間的數據“交流”的Vue實現方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要為大家詳細介紹了如何使用Vue3實現一個簡單的輸入框,可以實現輸入文字,添加表情等功能,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
本文主要介紹了el-tree樹組件懶加載(后端上千條數據前端進行處理)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
這篇文章主要介紹了Vue-cli和移動端布局和動畫使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
最近在做大屏展示需要在一開始播放引導視頻,產生自動播放需求,下面這篇文章主要給大家介紹了關于Vue中video標簽如何實現不靜音自動播放的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家詳細介紹了vue使用recorder.js實現錄音功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
elementplus+splitpanes實現左右拖動控制寬度的項目實踐
本文主要介紹了elementplus+splitpanes實現左右拖動控制寬度,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-05-05