Vue Element UI el-table 给表格添加复选框，并获取所选值

前言

在开发Web应用程序时，经常需要使用表格来展示大量数据。Vue Element UI中的el-table是一个功能强大的表格组件，可以帮助我们轻松实现数据展示、排序和筛选等功能。然而，有时候我们需要给表格添加复选框，并获取用户所选的数据。本篇博客将介绍如何使用Vue Element UI的el-table组件来实现这一功能。

准备工作

首先，我们需要确保已经安装了Vue和Element UI，并正确引入了相关的CSS和JS文件。如果还没有安装，可参考Vue和Element UI的官方文档进行安装和配置。

步骤一：创建表格

首先，我们需要创建一个基本的el-table，并为每一行添加一个复选框。在Vue的模板中，我们可以这样写：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection"></el-table-column>
    <!-- 其他列的定义 -->
  </el-table>
</template>

以上代码中，我们使用了<el-table-column type="selection"></el-table-column>来创建一个列，该列中将显示复选框。

步骤二：获取选中数据

为了获取用户所选的数据，我们需要为el-table添加一个@selection-change的事件监听器。我们可以在Vue的方法中定义该事件的处理函数，并将选中的数据保存起来。以下是一个简单的示例：

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
    <el-table-column type="selection"></el-table-column>
    <!-- 其他列的定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ],
      selectedData: [] // 保存选中数据的数组
    };
  },
  methods: {
    handleSelectionChange(selectedItems) {
      this.selectedData = selectedItems;
    }
  }
};
</script>

在以上代码中，我们定义了一个selectedData数组来保存用户选中的数据。当用户选中或取消选中某一行时，handleSelectionChange方法将被调用，并将选中的数据传入。

步骤三：展示选中数据

最后，我们可以使用{{ selectedData }}来展示用户所选的数据，或者根据实际需求对选中数据进行处理。例如，我们可以在模板中添加一个按钮，当用户点击该按钮时，弹出一个包含选中数据的对话框：

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
    <el-table-column type="selection"></el-table-column>
    <!-- 其他列的定义 -->
  </el-table>
  <el-button @click="showSelectedData">展示选中数据</el-button>
  <el-dialog :visible.sync="dialogVisible">
    <el-table :data="selectedData">
      <!-- 具体列的定义 -->
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ],
      selectedData: [],
      dialogVisible: false
    };
  },
  methods: {
    handleSelectionChange(selectedItems) {
      this.selectedData = selectedItems;
    },
    showSelectedData() {
      this.dialogVisible = true;
    }
  }
};
</script>

在以上代码中，我们通过el-dialog组件实现了一个简单的对话框，并在其中展示了用户所选的数据。

结语

通过以上步骤，我们成功地给Vue Element UI的el-table添加了复选框，并且能够获取用户所选的数据。这一功能在实际开发中非常常见，希望本文能对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言。谢谢阅读！

参考资料：

• Vue官方文档
• Element UI官方文档