el-table表格组件中插槽scope.row如何使用

el-table表格组件中插槽scope.row如何使用

1. 引言

在前端开发中，表格是展示数据的重要组件之一。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件，其中 el-table 是一个非常强大的表格组件。el-table 不仅支持基本的数据展示，还支持自定义列、排序、筛选、分页等功能。在自定义列时，scope.row 是一个非常重要的概念，它允许我们在表格的每一行中插入自定义内容。

本文将详细介绍 el-table 表格组件中插槽 scope.row 的使用方法，包括基本用法、高级用法以及常见问题的解决方案。

2. el-table 基本用法

在开始介绍 scope.row 之前，我们先回顾一下 el-table 的基本用法。

2.1 基本表格

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] } } } </script> 

在这个例子中，我们定义了一个简单的表格，表格的数据通过 tableData 数组传入，每一列通过 el-table-column 组件定义，prop 属性指定了数据对象的属性名，label 属性指定了列名。

2.2 自定义列内容

有时候我们需要在表格中展示一些复杂的内容，比如按钮、图标、图片等。这时就需要使用 el-table-column 的插槽功能。

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] } }, methods: { handleClick(row) { console.log(row) } } } </script> 

在这个例子中，我们在最后一列中添加了两个按钮，点击按钮时会触发 handleClick 方法，并将当前行的数据 scope.row 作为参数传入。

3. scope.row 的详细用法

3.1 scope.row 的基本概念

在 el-table-column 中，slot-scope 是一个特殊的插槽属性，它允许我们访问当前行的数据。scope.row 就是当前行的数据对象。

<template slot-scope="scope"> <span>{{ scope.row.name }}</span> </template> 

在这个例子中，scope.row 就是当前行的数据对象，我们可以通过 scope.row.name 访问当前行的 name 属性。

3.2 使用 scope.row 自定义列内容

我们可以通过 scope.row 自定义列的内容，比如展示图片、按钮、图标等。

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="头像"> <template slot-scope="scope"> <img :src="scope.row.avatar" alt="头像" style="width: 50px; height: 50px;"> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', avatar: 'https://via.placeholder.com/50' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', avatar: 'https://via.placeholder.com/50' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', avatar: 'https://via.placeholder.com/50' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', avatar: 'https://via.placeholder.com/50' } ] } }, methods: { handleClick(row) { console.log(row) } } } </script> 

在这个例子中，我们在表格中添加了一列“头像”，并通过 scope.row.avatar 展示了每一行的头像图片。

3.3 使用 scope.row 进行条件渲染

我们还可以根据 scope.row 的值进行条件渲染，比如根据不同的状态展示不同的图标或颜色。

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="状态"> <template slot-scope="scope"> <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'"> {{ scope.row.status }} </el-tag> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', status: 'success' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', status: 'danger' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', status: 'success' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', status: 'danger' } ] } } } </script> 

在这个例子中，我们根据 scope.row.status 的值动态设置了 el-tag 的 type 属性，从而实现了不同状态的标签展示。

3.4 使用 scope.row 进行复杂操作

有时候我们需要在表格中进行一些复杂的操作，比如根据当前行的数据进行计算、调用接口等。

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] } }, methods: { handleClick(row) { console.log(row) }, handleDelete(row) { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '删除成功!' }) }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }) }) } } } </script> 

在这个例子中，我们在操作列中添加了两个按钮，分别用于查看和删除当前行的数据。点击删除按钮时，会弹出一个确认框，用户确认后执行删除操作。

4. 常见问题与解决方案

4.1 scope.row 无法访问到数据

有时候我们会遇到 scope.row 无法访问到数据的情况，这通常是因为 el-table 的数据源 data 没有正确传入，或者 el-table-column 的 prop 属性没有正确设置。

解决方案：

• 确保 el-table 的 data 属性正确传入了一个数组。
• 确保 el-table-column 的 prop 属性与数据对象的属性名一致。

4.2 scope.row 中的数据无法实时更新

有时候我们会发现 scope.row 中的数据无法实时更新，这通常是因为 Vue 的响应式系统没有检测到数据的变化。

解决方案：

• 确保数据是通过 Vue 的响应式系统进行更新的，比如使用 this.$set 或者直接修改数组的引用。

4.3 scope.row 中的数据格式不正确

有时候我们会发现 scope.row 中的数据格式不正确，比如日期格式、数字格式等。

解决方案：

• 在 scope.row 中使用过滤器或者计算属性对数据进行格式化。

<template slot-scope="scope"> <span>{{ scope.row.date | formatDate }}</span> </template> 

filters: { formatDate(value) { return new Date(value).toLocaleDateString() } } 

5. 总结

el-table 是一个非常强大的表格组件，scope.row 是我们在自定义列内容时的重要工具。通过 scope.row，我们可以轻松地访问当前行的数据，并根据需要进行自定义渲染、条件渲染、复杂操作等。

在实际开发中，我们可能会遇到一些问题，比如 scope.row 无法访问到数据、数据无法实时更新、数据格式不正确等。通过本文的介绍，相信大家已经掌握了这些问题的解决方案。

希望本文能够帮助大家更好地理解和使用 el-table 表格组件中的 scope.row 插槽。