Element-ui中的table相关操作

最新推荐文章于 2025-07-04 22:30:09 发布

原创最新推荐文章于 2025-07-04 22:30:09 发布 · 867 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

element 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Element UI中表格组件的使用方法，包括如何通过点击复选框全选或取消全选所有行，如何获取表格中所有数据及所选行的数据，以及如何监听行选择事件和行点击事件来获取特定行数据，最后还介绍了如何清除所有选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、点击表格第一个复选框全选所有行：

事件“select-all”：

<template>  
 <el-table
      :data="tableData"
      ref="multipleTable"
      style="width: 100%"
      @select-all="selectAllHandle"
    >
  </el-table>
</template>

<script>
    methods: {
        selectAllHandle(selection) {
          console.log("selectAllHandle");
          console.log(selection);
        }
    }
</script>

2、点击表格第一个复选框取消全选所有行：

3、点击按钮获取表格中所有数据：

4、点击按钮获取表格中所有选择的行：

<el-button
  type="primary"
  icon="el-icon-finished"
  size="mini"
  @click="getSelection()"
>获取选择行</el-button>

<el-table
      :data="tableData"
      ref="multipleTable"
      style="width: 100%"
    >
</el-table>

getSelection() {
   let selection = this.$refs.multipleTable.selection;
   console.log(selection);
}

5、选择某一行时获取该行数据：

事件：select

5、点击某一行时获取该行数据：

事件：row-click

6、取消所有选择：

方法：clearSelection()

this.$refs.multipleTable.clearSelection();

、