vue是一种非常流行的javascript框架，广泛用于开发交互式的web应用程序。在vue中，我们通常会使用表格（table）来展示数据。但是，某些时候我们需要展示表格的序号，以方便用户对表格中的数据进行更好的理解和分析。在本篇文章中，我们将介绍如何使用vue来实现表格的序号显示。
一、在Vue中设置表格数据
假设我们有如下一个表格，其中包含了学生的姓名、年龄和成绩：
<template>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in students" :key="index">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.score }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
students: [
{ name: '小明', age: 18, score: 90 },
{ name: '小红', age: 20, score: 80 },
{ name: '小刚', age: 19, score: 85 },
{ name: '小李', age: 21, score: 88 },
],
};
},
};
</script>这个表格的数据比较简单，我们使用了v-for指令来遍历students数组，并在表格中显示每个学生的信息。
二、在Vue中添加表格序号
立即学习“前端免费学习笔记（深入）”；
为了在表格中显示序号，我们需要额外添加一个列，表示当前行在表格中的序号。我们可以使用JavaScript中的map()方法为每个学生添加一个序号属性，然后在表格中将该属性进行显示。
主要更新介绍： 完美整合Discuz!论坛，实现一站式登陆、退出、注册； 同步所有会员资料； 新增购物车功能，商品购买更加方便、快捷； 新增部分快捷菜单，网站访问更加方便； 限制首页商品、店铺标题显示长度； 修正会员后台管理不能更改密码的错误； 完善商品显示页面所有功能链接； 修正后台标签管理部分错误； 修正前台学校列表不按后台顺序显示的错误； 修正搜索功能中学校名称过长导致显示紊乱的现象； 修正
<template>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in studentsWithIndex" :key="index">
<td>{{ student.index }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.score }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
students: [
{ name: '小明', age: 18, score: 90 },
{ name: '小红', age: 20, score: 80 },
{ name: '小刚', age: 19, score: 85 },
{ name: '小李', age: 21, score: 88 },
],
};
},
computed: {
studentsWithIndex() {
return this.students.map((item, index) => ({
index: index + 1,
...item,
}));
},
},
};
</script>在这里，我们在Vue的计算属性（computed）中创建了一个新的数组studentsWithIndex，这个数组是在原有的students数组上进行转化得到的，通过map()方法遍历students数组，为每个学生添加一个index属性，并将index属性值设置为当前遍历的索引值加1。同时，我们还使用了ES6的对象解构语法（...item）将原有的学生数据与新添加的index属性进行合并，最终返回一个新的对象数组。在表格中，我们将显示新添加的index属性，即学生在表格中的序号。
三、在Vue中设置表格排序
在某些情况下，我们需要根据某个属性对表格数据进行排序。我们可以使用JavaScript的sort()方法对表格数据进行排序，并实现动态更新表格中的序号。
<template>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th @click="sortByScore">成绩</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in studentsWithIndex" :key="index">
<td>{{ student.index }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.score }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
students: [
{ name: '小明', age: 18, score: 90 },
{ name: '小红', age: 20, score: 80 },
{ name: '小刚', age: 19, score: 85 },
{ name: '小李', age: 21, score: 88 },
],
};
},
computed: {
studentsWithIndex() {
return this.students.map((item, index) => ({
index: index + 1,
...item,
}));
},
},
methods: {
sortByScore() {
if (this.sortDirection === 'asc') {
this.students.sort((a, b) => b.score - a.score);
this.sortDirection = 'desc';
} else {
this.students.sort((a, b) => a.score - b.score);
this.sortDirection = 'asc';
}
this.$forceUpdate();
},
},
mounted() {
this.sortDirection = 'asc'; // 默认升序排列
},
};
</script>在这里，我们在Vue中添加了一个新的表头，即成绩列，使用@click监听该列的点击事件。同时，我们在Vue的方法中新增了一个sortByScore方法，用于对表格数据进行排序。当用户点击表头时，我们使用sort()方法对students数组进行排序，并更新sortDirection属性的值，表示当前表格的排序方式（升序或降序）。注意，我们在sortByScore方法中使用了$forceUpdate()方法强制更新Vue实例，以动态更新表格中的序号。
综上所述，在Vue中实现表格序号的显示并不难，我们可以使用Vue提供的计算属性和方法来实现。通过上述示例，相信您已经掌握了在Vue中实现表格序号的方法，并在此基础上可以进一步拓展其它功能。
