el-table 设置多列默认排序

在 el-table 中设置多列默认排序可以使用 `default-sort` 属性。该属性需要传入一个数组，数组中每个元素都表示一个默认排序规则，每个规则需要传入一个对象，对象中的 `prop` 属性表示要排序的字段，`order` 属性表示排序方式，可以是 `ascending`（升序）或 `descending`（降序）。

例如，要设置 el-table 按照 `age` 字段降序排序，然后在 `name` 字段升序排序，可以这样写：

<el-table :data="tableData" :default-sort="[ {prop: 'age', order: 'descending'}, {prop: 'name', order: 'ascending'} ]">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

相关问题

el-table设置某列宽度

你可以使用el-table-column组件的width属性来设置表格某列的宽度。例如，若要将第一列的宽度设置为120像素，则可以添加以下代码：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" width="120"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

请注意，此处的tableData是你要显示的表格数据。

elementUI el-table表格列按时间排序

ElementUI的el-table表格组件提供了sort-by和sort-order两个属性来实现列排序。在列定义中，可以将sort-by属性设置为列的数据字段名，sort-order设置为升序或降序。

例如，如果有一个名为“create_time”的时间字段，可以在列定义中添加以下属性：

{
  label: '创建时间',
  prop: 'create_time',
  sortable: true,
  sort-by: 'create_time',
  sort-orders: ['asc', 'desc']
}

然后，可以在表格中点击该列的表头，通过sort-by和sort-order属性来实现按时间排序。

完整的el-table表格列按时间排序示例代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      label="编号"
      width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.id }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="名称"
      prop="name"
      width="180"
      sortable>
    </el-table-column>
    <el-table-column
      label="创建时间"
      prop="create_time"
      width="180"
      sortable
      sort-by="create_time"
      :sort-orders="['asc', 'desc']">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: '1',
          name: '张三',
          create_time: '2022-01-01 08:00:00'
        },
        {
          id: '2',
          name: '李四',
          create_time: '2022-01-02 09:00:00'
        },
        {
          id: '3',
          name: '王五',
          create_time: '2022-01-03 10:00:00'
        }
      ]
    }
  }
}
</script>