<template> <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" > <el-table-column prop="date" label="日期" sortable width="180"> </el-table-column> <el-table-column prop="name" label="姓名" sortable width="180"> </el-table-column> <el-table-column prop="address" label="地址" :formatter="formatter"> </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: { formatter(row, column) { return row.address; } } } </script> 修改为后端排序

首先，我们需要将前端表格的排序方式改为后端排序，即在服务端进行数据排序，而不是在前端进行数据排序。在前端的代码中，我们可以看到 `:default-sort` 属性被设置为 `{prop: 'date', order: 'descending'}`，这表示默认按照日期进行降序排序。我们需要将这个属性移除，同时添加一个 `sort` 属性来表示当前的排序方式。修改后的代码如下：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-key="row => row.id"
    :sort="sort"
  >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180"
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      sort: {
        prop: 'date',
        order: 'descending'
      },
    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    fetchData() {
      // 在这里发送请求获取数据，并更新 tableData
      // 可以根据需要设置 sort 的值
    },
  },
  mounted() {
    this.fetchData();
  },
}
</script>

接下来，我们需要在 `fetchData` 方法中发送请求来获取数据，同时在请求中加入排序参数。假设我们的后端接口是 `/api/data`，我们可以向这个接口发送一个 GET 请求，并在请求中加入 `sort` 参数来指定排序方式。我们可以在请求成功后更新 `tableData` 数组，同时更新 `sort` 对象的值。修改后的 `fetchData` 方法如下：

fetchData() {
  const params = {
    sort: `${this.sort.prop}:${this.sort.order}`
  };
  axios.get('/api/data', { params })
    .then(response => {
      this.tableData = response.data;
      // 更新 sort 对象的值
      const { prop, order } = response.data.sort;
      this.sort = { prop, order };
    })
    .catch(error => {
      console.log(error);
    });
}

这样，我们就完成了将前端表格修改为后端排序的操作。