Vue技术开发中如何处理表格数据的排序和过滤

data() {  return {    tableData: [      { name: '张三', age: 20, gender: '男' },      { name: '李四', age: 25, gender: '女' },      { name: '王五', age: 22, gender: '男' },      // ...    ],    sortKey: '',  // 用来记录排序的列名    sortOrder: 1  // 用来记录排序的顺序，1表示升序，-1表示降序  }}

computed: {  sortedTableData() {    return this.tableData.sort((a, b) => {      return (a.age - b.age) * this.sortOrder;    });  }}

<table>  <tr>    <th @click="sort('name')">姓名</th>    <th @click="sort('age')">年龄</th>    <th @click="sort('gender')">性别</th>  </tr>  <tr v-for="item in sortedTableData" :key="item.name">    <td>{{ item.name }}</td>    <td>{{ item.age }}</td>    <td>{{ item.gender }}</td>  </tr></table>

methods: {  sort(key) {    if (key === this.sortKey) {  // 如果点击的是同一列      this.sortOrder *= -1;  // 切换排序顺序    } else {      this.sortKey = key;  // 记录当前排序的列      this.sortOrder = 1;  // 默认升序排序    }  }}

data() {  return {    tableData: [      // 表格数据    ],    filterValue: ''  // 过滤条件  }}

computed: {  filteredTableData() {    return this.tableData.filter(item => {      return item.name.includes(this.filterValue) ||              item.age.toString().includes(this.filterValue) ||             item.gender.includes(this.filterValue);    });  }}

<input v-model="filterValue" placeholder="请输入过滤条件"><table>  <tr>    <th>姓名</th>    <th>年龄</th>    <th>性别</th>  </tr>  <tr v-for="item in filteredTableData" :key="item.name">    <td>{{ item.name }}</td>    <td>{{ item.age }}</td>    <td>{{ item.gender }}</td>  </tr></table>