How to display table serial number in vue

Vue is a very popular JavaScript framework that is widely used to develop interactive web applications. In Vue, we usually use tables to display data. However, sometimes we need to display the serial number of the table to facilitate users to better understand and analyze the data in the table. In this article, we will introduce how to use Vue to display the serial number of the table.

1. Set table data in Vue

Suppose we have the following table, which contains students’ names, ages and grades:

<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>

Data comparison of this table Simple, we use the v-for instruction to traverse the students array and display each student's information in the table.

2. Add the table serial number in Vue

In order to display the serial number in the table, we need to add an additional column to represent the serial number of the current row in the table. We can use the map() method in JavaScript to add a serial number attribute to each student, and then display this attribute in the table.

<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>

Here, we create a new array studentsWithIndex in Vue’s computed property (computed). This array is based on the original students array. After conversion, traverse the students array through the map() method, add an index attribute to each student, and set the index attribute The value is set to the currently traversed index value plus 1. At the same time, we also used the ES6 object destructuring syntax (...item) to merge the original student data with the newly added index attribute, and finally return a new object array. In the table, we will display the newly added index attribute, which is the student's serial number in the table.

3. Set table sorting in Vue

In some cases, we need to sort table data based on a certain attribute. We can use JavaScript's sort() method to sort table data and dynamically update the serial numbers in the table.

<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>

Here, we added a new header in Vue, that is, the score column, and used @click to listen to the click event of this column. At the same time, we have added a new sortByScore method to the Vue method for sorting table data. When the user clicks on the table header, we use the sort() method to sort the students array and update the value of the sortDirection attribute to indicate the sorting method of the current table (ascending or descending order). Note that we used the $forceUpdate() method in the sortByScore method to force the update of the Vue instance to dynamically update the serial number in the table.

In summary, it is not difficult to display table serial numbers in Vue. We can use the calculated properties and methods provided by Vue to achieve this. Through the above examples, I believe you have mastered the method of implementing table serial numbers in Vue, and based on this, you can further expand other functions.

The above is the detailed content of How to display table serial number in vue. For more information, please follow other related articles on the PHP Chinese website!