快捷導(dǎo)航

vue3獲取選中的el-table行數(shù)據(jù)方式

更新時(shí)間：2025年08月12日 09:57:55 作者：海天勝景

文章介紹Vue3中使用el-table獲取選中行數(shù)據(jù)的三種方法：推薦通過(guò)@selection-change事件獲?。‥lementPlus最新實(shí)踐）,ElementUI可用selection屬性,而v-model:checked-rows已廢棄,強(qiáng)調(diào)根據(jù)庫(kù)版本選擇合適方案,確保兼容性

方法1：使用@selection-change事件

<el-table>組件提供了一個(gè)@selection-change事件，該事件會(huì)在選中項(xiàng)發(fā)生變化時(shí)觸發(fā)，你可以在這個(gè)事件的處理函數(shù)中獲取當(dāng)前的選中行數(shù)據(jù)。

首先，確保你的<el-table>組件的type屬性設(shè)置為selection，這樣就會(huì)顯示復(fù)選框，允許用戶選擇行。

<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([/* 你的數(shù)據(jù) */]);
const selectedRows = ref([]);
 
const handleSelectionChange = (val) => {
  selectedRows.value = val; // val是當(dāng)前選中行的數(shù)組
};
</script>

方法2：使用Table實(shí)例的selection屬性

如果你需要通過(guò)編程方式訪問(wèn)或操作選中的行，你可以使用<el-table>組件的ref屬性來(lái)引用該組件的實(shí)例，然后通過(guò)該實(shí)例的selection屬性來(lái)獲取選中的行數(shù)據(jù)

<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' 取決于你使用的庫(kù)版本和包名
 
const tableData = ref([/* 你的數(shù)據(jù) */]);
const multipleTableRef = ref(null); // 通過(guò)ref獲取組件實(shí)例
 
const getSelectionRows = () => {
  if (multipleTableRef.value) { // 檢查ref是否已正確引用組件實(shí)例
    const selectedRows = multipleTableRef.value.selection; // 獲取選中行數(shù)據(jù)數(shù)組
    console.log(selectedRows); // 處理或顯示選中行數(shù)據(jù)
  }
};
</script>

在Element Plus中，直接通過(guò)selection屬性訪問(wèn)選中行的功能已經(jīng)被移除。

你應(yīng)該使用getSelectionRows方法（如方法1所示）來(lái)處理這一需求。

如果你使用的是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）來(lái)直接綁定選中的行數(shù)據(jù)，但這種方法在Vue 3和Element Plus中已經(jīng)被廢棄或更改。推薦使用上述方法1來(lái)處理這個(gè)問(wèn)題。

推薦使用方法1（通過(guò)@selection-change事件處理選中行數(shù)據(jù)），這是最通用且符合Vue 3和Element Plus最新實(shí)踐的方法。如果你使用的是Element UI并且想要通過(guò)實(shí)例直接訪問(wèn)選中行，請(qǐng)確保你的項(xiàng)目依賴和代碼示例匹配正確的庫(kù)版本。對(duì)于Element Plus，請(qǐng)遵循最新的API和最佳實(shí)踐。