el-table-column sortable

el-table-column 的 sortable 属性决定该列是否可排序。当该属性被设置为 true 时，列头会显示一个可点击的排序箭头，用户点击该箭头即可对该列进行升序或降序排序。代码示例：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期" sortable></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

在上面的示例中，第一列的 `sortable` 属性被设置为 true，因此该列可被排序。其他两列没有设置该属性，因此不能被排序。

相关问题

vue <el-table-column sortable 修改排序规则

要修改 Vue 的 `<el-table-column>` 组件的排序规则，你可以使用 `sort-method` 属性来自定义排序方法。

在 `<el-table-column>` 中添加 `sort-method` 属性，并将其绑定到一个排序方法的函数。这个函数接收两个参数：`a` 和 `b`，分别代表进行比较的两个元素。你可以在该函数中定义自己的排序规则，并返回一个数字来表示它们的顺序。如果返回值是负数，则 `a` 在 `b` 之前；如果返回值是正数，则 `a` 在 `b` 之后；如果返回值是零，则 `a` 与 `b` 的顺序不变。

以下是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" sortable :sort-method="sortMethod"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20 },
        { name: 'Mike', age: 25 },
        { name: 'Alice', age: 18 }
      ]
    };
  },
  methods: {
    sortMethod(a, b) {
      // 自定义排序规则
      return a.name.localeCompare(b.name); // 按名称进行排序
    }
  }
};
</script>

在上面的示例中，我们通过 `sortMethod` 方法自定义了按名称进行排序的规则。

希望这可以帮助到你！如果你还有其他问题，请随时提问。

<el-table :data="tableData" height="80%" width="100%" border stripe="stripe"> <el-table-column prop="orderid" label="订单号" width="100px" sortable> </el-table-column> <el-table-column prop="username" label="用户名" width="150px" sortable> </el-table-column> <el-table-column prop="nickname" label="昵称" width="150px" sortable> </el-table-column> <el-table-column prop="componname" label="商品名称" width="150px" sortable> </el-table-column> <el-table-column prop="tel" label="电话" width="130px" sortable> </el-table-column> <el-table-column prop="address" label="地址" width="200px" sortable> </el-table-column> <el-table-column prop="number" label="数量" width="80px" sortable> </el-table-column> <el-table-column prop="createtime" label="创建时间" width="200px" sortable> </el-table-column> <el-table-column prop="stateview" label="状态" width="120px" sortable> </el-table-column>

这段代码是Vue.js代码，用于创建一个表格。表格包括多个列，每个列都有一个prop属性用于指定数据源中对应的字段名，一个label属性用于指定列的名称，一个width属性用于指定列的宽度以及一个sortable属性用于指定是否启用排序功能。其中的数据源是通过tableData属性传入的一个数组，包含多个对象，每个对象对应表格中的一行数据，对象的属性名对应列的prop属性值。