vue elementui表格如何获取某行数据

发布时间：2023-01-17 09:13:08 作者：iii
来源：亿速云阅读：564

Vue ElementUI 表格如何获取某行数据

在使用 Vue.js 和 ElementUI 开发前端应用时，表格（el-table）是一个非常常用的组件。ElementUI 提供了丰富的表格功能，包括排序、筛选、分页、多选等。在实际开发中，我们经常需要获取表格中某一行或某几行的数据，以便进行进一步的操作，比如编辑、删除、查看详情等。本文将详细介绍如何在 Vue 和 ElementUI 中获取表格的某行数据，并提供多种实现方式和示例代码。

1. 基本表格结构

首先，我们来看一个基本的 ElementUI 表格结构。假设我们有一个简单的表格，展示用户信息：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市朝阳区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ]
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log('编辑行:', index, row);
    },
    handleDelete(index, row) {
      console.log('删除行:', index, row);
    }
  }
};
</script>

在这个例子中，我们定义了一个简单的表格，展示了用户的姓名、年龄和地址。表格的最后一列是操作列，包含“编辑”和“删除”两个按钮。点击按钮时，会触发相应的方法，并传入当前行的索引和数据。

2. 获取某行数据的方式

在 ElementUI 的表格中，获取某行数据的方式主要有以下几种：

2.1 使用 `slot-scope` 获取行数据

在 ElementUI 的表格中，el-table-column 组件提供了一个 slot-scope 插槽，可以通过 scope.row 获取当前行的数据。scope.row 是一个对象，包含了当前行的所有数据。

在上面的例子中，我们通过 scope.row 获取了当前行的数据，并将其传递给 handleEdit 和 handleDelete 方法。

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>

2.2 使用 `@row-click` 事件获取行数据

ElementUI 的表格组件提供了一个 @row-click 事件，当用户点击某一行时，会触发该事件，并返回当前行的数据。

<template>
  <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市朝阳区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ]
    };
  },
  methods: {
    handleRowClick(row, column, event) {
      console.log('点击行:', row);
    }
  }
};
</script>

在这个例子中，当用户点击某一行时，handleRowClick 方法会被触发，并传入当前行的数据 row。

2.3 使用 `ref` 获取表格实例

在某些情况下，我们可能需要通过编程的方式获取表格的某一行数据。这时，我们可以使用 ref 获取表格的实例，然后通过表格实例的方法获取某一行数据。

<template>
  <el-table ref="table" :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="getRowData">获取第一行数据</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市朝阳区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ]
    };
  },
  methods: {
    getRowData() {
      const table = this.$refs.table;
      const row = table.data[0]; // 获取第一行数据
      console.log('第一行数据:', row);
    }
  }
};
</script>

在这个例子中，我们通过 ref 获取了表格的实例，然后通过 table.data 获取了表格的所有数据，并从中提取了第一行的数据。

2.4 使用 `@selection-change` 获取多选数据

如果表格支持多选，我们可以通过 @selection-change 事件获取用户选择的行数据。

<template>
  <el-table ref="table" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="getSelectedRows">获取选中行数据</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市朝阳区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ],
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    getSelectedRows() {
      console.log('选中行数据:', this.selectedRows);
    }
  }
};
</script>

在这个例子中，我们通过 @selection-change 事件获取用户选择的行数据，并将其存储在 selectedRows 中。点击“获取选中行数据”按钮时，可以输出用户选择的行数据。

3. 实际应用场景

在实际开发中，获取表格某行数据的场景非常常见。以下是一些常见的应用场景：

3.1 编辑某行数据

在表格中，通常会有一个“编辑”按钮，点击该按钮时，可以弹出一个对话框，允许用户编辑当前行的数据。这时，我们需要获取当前行的数据，并将其传递给编辑对话框。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :visible.sync="dialogVisible" title="编辑用户信息">
    <el-form :model="editForm">
      <el-form-item label="姓名">
        <el-input v-model="editForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="editForm.age"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="editForm.address"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveEdit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市朝阳区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ],
      dialogVisible: false,
      editForm: {
        name: '',
        age: '',
        address: ''
      }
    };
  },
  methods: {
    handleEdit(row) {
      this.editForm = { ...row };
      this.dialogVisible = true;
    },
    saveEdit() {
      // 保存编辑后的数据
      const index = this.tableData.findIndex(item => item.name === this.editForm.name);
      if (index !== -1) {
        this.tableData.splice(index, 1, { ...this.editForm });
      }
      this.dialogVisible = false;
    }
  }
};
</script>

在这个例子中，当用户点击“编辑”按钮时，handleEdit 方法会获取当前行的数据，并将其赋值给 editForm，然后弹出编辑对话框。用户编辑完成后，点击“保存”按钮时，saveEdit 方法会将编辑后的数据保存回表格中。

3.2 删除某行数据

在表格中，通常会有一个“删除”按钮，点击该按钮时，可以删除当前行的数据。这时，我们需要获取当前行的数据，并根据其唯一标识（如 ID）从表格数据中删除该行。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市朝阳区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ]
    };
  },
  methods: {
    handleDelete(row) {
      this.tableData = this.tableData.filter(item => item.name !== row.name);
    }
  }
};
</script>

在这个例子中，当用户点击“删除”按钮时，handleDelete 方法会获取当前行的数据，并根据其 name 属性从 tableData 中删除该行。

3.3 查看某行详情

在表格中，通常会有一个“查看详情”按钮，点击该按钮时，可以弹出一个对话框，展示当前行的详细信息。这时，我们需要获取当前行的数据，并将其传递给详情对话框。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleView(scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :visible.sync="detailVisible" title="用户详情">
    <el-form :model="detailForm" label-width="80px">
      <el-form-item label="姓名">
        <span>{{ detailForm.name }}</span>
      </el-form-item>
      <el-form-item label="年龄">
        <span>{{ detailForm.age }}</span>
      </el-form-item>
      <el-form-item label="地址">
        <span>{{ detailForm.address }}</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="detailVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市朝阳区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ],
      detailVisible: false,
      detailForm: {
        name: '',
        age: '',
        address: ''
      }
    };
  },
  methods: {
    handleView(row) {
      this.detailForm = { ...row };
      this.detailVisible = true;
    }
  }
};
</script>

在这个例子中，当用户点击“查看详情”按钮时，handleView 方法会获取当前行的数据，并将其赋值给 detailForm，然后弹出详情对话框。

4. 总结

在 Vue 和 ElementUI 中，获取表格某行数据是非常常见的需求。通过 slot-scope、@row-click、ref 和 @selection-change 等方式，我们可以轻松地获取表格中的某一行或某几行数据，并根据实际需求进行进一步的操作。无论是编辑、删除还是查看详情，掌握这些技巧都能大大提高开发效率。

希望本文对你理解和使用 Vue 和 ElementUI 的表格组件有所帮助。如果你有任何问题或建议，欢迎在评论区留言讨论。