How to implement dynamic table sorting function in Vue

As Vue becomes popular and more and more businesses use it to build their web applications, we may encounter problems that require generating dynamic tables and implementing sorting in Vue. In this article, we will explore how to implement dynamic table sorting in Vue.

First of all, in order to implement dynamic table sorting, we need an array containing data. We can define an array in Vue using the data attribute. For example:

data() {
  return {
    tableData: [
      { name: 'John', age: 25, gender: 'male' },
      { name: 'Jane', age: 30, gender: 'female' },
      { name: 'Bob', age: 20, gender: 'male' }
    ],
    sortKey: 'name',
    reverse: false
  }
},

As shown above, we define an array containing three objects, each object contains name, age and gender attributes. We also define a sortKey property to store the current sort key name, and a reverse property to store whether the sort order needs to be reversed.

Next, we need to create a method that can be triggered when the table header is clicked. In this method, we will change the sortKey property to sort based on different key names, and determine whether to sort in ascending or descending order based on the value of the reverse property. For example:

sortTable(key) {
  this.reverse = (this.sortKey == key) ? !this.reverse : false;
  this.sortKey = key;
  this.tableData.sort((a, b) => {
    let valA = a[key];
    let valB = b[key];
    if (this.reverse) {
      [valA, valB] = [valB, valA];
    }
    return valA.localeCompare(valB, 'zh-Hans-CN', { numeric: true });
  });
}

In this method, we first determine whether the current sorted key name is the same as the header clicked by the user. If so, the reverse attribute will be inverted, otherwise the reverse attribute will be reset to false. We then set the sortKey property to the data property of the table header that the user clicked on.

Finally is the core part of the sorting code. We use the sort method to sort the array, using arrow functions, destructuring, and multilingual sorting. Specifically, we use the inverted value and the attribute value corresponding to the current key name, and then use the localeCompare method to compare the two values ​​to achieve Chinese sorting.

Next, we need to add an event listener to the table header to call the sortTable method to implement sorting. For example:

<th @click="sortTable(&#39;name&#39;)">姓名</th>
<th @click="sortTable(&#39;age&#39;)">年龄</th>
<th @click="sortTable(&#39;gender&#39;)">性别</th>

Here, we add a click event listener for each cell of the table header and pass the selected data attribute to the sortTable method to sort when the user clicks on the table header .

Finally, we need to update the table so that it re-renders after each data sorting. We can use the v-for directive to iterate through the tableData array and bind the properties of each object to the corresponding cell in the HTML table. For example:

<table>
  <thead>
    <tr>
      <th @click="sortTable(&#39;name&#39;)">姓名</th>
      <th @click="sortTable(&#39;age&#39;)">年龄</th>
      <th @click="sortTable(&#39;gender&#39;)">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.gender }}</td>
    </tr>
  </tbody>
</table>

Through these codes, we can easily implement the sorting function of dynamically generated tables in Vue. Whether working with large data sets or simple sorted displays, Vue has many practical tools and methods to help us complete the task.

The above is the detailed content of How to implement dynamic table sorting function in Vue. For more information, please follow other related articles on the PHP Chinese website!