表格数据任意取，ElementUI轻松搞定

2023-02-10 00:33:11

ElementUI Table 组件：获取表格数据的两种方法

简介

ElementUI 是一个功能强大的前端 UI 框架，用于构建各种 Web 应用程序。Table 组件是其中一个核心组件，用于显示和操作数据。了解如何获取 Table 表格数据对于构建交互式应用程序至关重要。

两种获取数据的方法

1. 使用 ref 属性

ref 属性允许您访问组件实例，从而可以操作其数据和方法。在 Table 组件上使用 ref，您可以获得对其实例的引用，并访问表格数据和方法。

<el-table ref="table" :data="tableData">
  <!-- Table 列配置 -->
</el-table>

<script>
  export default {
    methods: {
      handleRowClick(row) {
        console.log(row); // 输出当前点击的行数据
        console.log(row._id); // 输出当前点击行的 id
      },
    },
  };
</script>

通过访问 this.$refs.table，您可以获取对 Table 实例的引用，然后使用 row 参数访问当前点击的行数据和 id。

优点：

便于访问组件实例
访问组件所有数据和方法

缺点：

需要修改组件结构
需要在模板中设置 ref 属性

2. 使用 getSelection() 方法

getSelection() 方法允许您获取当前选中的行数据。通过在 Table 组件上使用 @selection-change 事件处理程序，您可以监听行选择的变化，并使用 getSelection() 获取选中的行数据。

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <!-- Table 列配置 -->
</el-table>

<script>
  export default {
    methods: {
      handleSelectionChange(selection) {
        console.log(selection); // 输出选中的行数据
        console.log(selection.map(item => item._id)); // 输出选中行的 id 数组
      },
    },
  };
</script>