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和最佳实践。

相关推荐
小菜全17 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊18 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan19 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿20 小时前
vue项目引入字体
前端·javascript·vue.js
笨蛋不要掉眼泪20 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
GISer_Jing1 天前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
奶糖 肥晨1 天前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
个人看法1 天前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
belldeep1 天前
python:Django 和 Vue.js 技术栈解析
vue.js·python·django
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++