<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> sortable设罡为custom并可以选择多列排序以使用后端排序

这段代码中的表格组件使用了 Element UI 的 el-table 组件，其中通过 :data="tableData" 属性绑定了表格数据，通过 :default-sort="{prop: 'date', order: 'descending'}" 属性设置了默认排序方式为按照日期（date）倒序排序。其中 el-table-column 组件表示表格列，通过 prop 属性绑定数据对象中的属性，通过 label 属性设置列标题，通过 sortable 属性设置列是否可排序。在第三列中，通过 :formatter="formatter" 属性设置了自定义的单元格格式化方法。如果需要使用后端排序，则需要将 sortable 属性设置为 'custom' 并添加相应的事件处理方法。

相关问题

<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);
    });
}

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

el-table selection类型，如何自定义表头

的多选框？

要自定义 el-table 表头的多选框，你可以使用一个 slot 来插入你想要的 DOM。具体步骤如下：

1. 在 el-table 中添加 v-slot:header，指定为一个具名插槽。

2. 在插入的 DOM 中添加一个 el-checkbox 组件，并绑定它的 v-model 值到 el-table 的 selection 数组上。

3. 使用 v-bind 属性绑定 checkbox 的选中状态和头部中的全选状态，保证它们的同步。

下面是一份示例代码：

<el-table
  :data="tableData"
  v-show="tableData.length"
  :default-sort="{prop: 'date', order: 'descending'}"
  style="width: 100%">
  <template #header>
    <el-table-column
      type="selection"
      width="55">
      <template #header>
        <el-checkbox
          v-model="allSelected"
          :indeterminate="isIndeterminate">
          <slot></slot>
        </el-checkbox>
      </template>
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </template>
</el-table>

在这份代码中，我们使用了一个具名的插槽来自定义 el-table 头部的多选框，并绑定了 allSelected 和 isIndeterminate 这两个数据到 el-checkbox 上，实现了多选框和全选框的同步。