js sort 传参

在 JavaScript 中，sort() 方法可以对数组进行排序。sort() 方法可以接受一个函数作为参数，该函数定义了排序规则。如果不传递任何参数，则默认按照 Unicode 编码进行排序。

sort() 方法的语法如下：

array.sort(compareFunction)

其中，compareFunction 是可选的参数，它是一个函数，用于指定排序规则。如果省略该参数，则按照 Unicode 编码进行排序。

compareFunction 函数接受两个参数，分别表示进行比较的两个元素。如果 compareFunction(a, b) 返回小于 0 的值，则 a 会被排在 b 的前面；如果返回大于 0 的值，则 a 会被排在 b 的后面；如果返回 0，则 a 和 b 的相对位置不变。

下面是一个例子：

const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

在上面的例子中，我们传递了一个箭头函数 `(a, b) => a - b`，它表示按照升序排序。

相关问题

el-table-column循环出来的 怎么给每一列添加sort-method传参key呢

可以通过使用作用域插槽来实现这个功能。在 `el-table-column` 上定义一个 `scopedSlots` 属性，然后在模板里面使用作用域插槽来渲染每一列：

<template>
  <el-table :data="tableData" border>
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" :sortable="true" :sort-method="column.sortMethod" :width="column.width">
      <template v-if="column.scopedSlot" v-slot="scope">
        <slot :name="column.scopedSlot" v-bind="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

可以看到，我们在 `el-table-column` 上添加了 `:sort-method="column.sortMethod"` 属性，其中 `column.sortMethod` 是一个函数，用于自定义排序方法。同时，我们还添加了一个作用域插槽，用于渲染自定义的内容。

在组件中，我们可以定义一个 `columns` 数组，用于存储表格的列信息：

export default {
  data() {
    return {
      tableData: [],
      columns: [
        { label: '姓名', prop: 'name', width: '120px', sortMethod: this.sortByName },
        { label: '年龄', prop: 'age', width: '120px', sortMethod: this.sortByAge },
        { label: '性别', prop: 'gender', width: '120px' },
        { label: '地址', prop: 'address' },
        { label: '操作', width: '120px', scopedSlot: 'actions' }
      ]
    };
  },
  methods: {
    sortByName(a, b) {
      return a.name.localeCompare(b.name);
    },
    sortByAge(a, b) {
      return a.age - b.age;
    }
  }
};

可以看到，我们在 `columns` 数组中定义了每一列的 `label`、`prop`、`width` 和 `sortMethod` 属性。其中，`sortMethod` 是一个函数，用于自定义排序方法。我们还可以在 `columns` 数组中定义一个 `scopedSlot` 属性，用于渲染自定义的内容。

最后，在模板中使用作用域插槽来渲染自定义的内容：

<template>
  <el-table :data="tableData" border>
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" :sortable="true" :sort-method="column.sortMethod" :width="column.width">
      <template v-if="column.scopedSlot" v-slot="scope">
        <slot :name="column.scopedSlot" v-bind="scope"></slot>
      </template>
      <template v-else-if="column.prop === 'gender'">
        {{ scope.row.gender === 1 ? '男' : '女' }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="120px">
      <template v-slot:actions="{ row }">
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

可以看到，我们在 `el-table-column` 中使用了 `v-if` 和 `v-else-if` 来渲染不同的内容。如果当前列有 `scopedSlot` 属性，则使用作用域插槽来渲染自定义的内容；否则，根据 `prop` 属性渲染不同的内容。在这个例子中，我们根据 `gender` 属性来渲染不同的性别文本，根据 `actions` 属性来渲染操作按钮。

vue router query传参

### 如何在 Vue Router 中通过 Query 方式传递参数

当使用 Vue Router 时，可以通过 URL 的查询字符串来传递参数。这使得可以在不改变路由的情况下附加额外的信息。

定义带有查询参数的链接如下所示：

<router-link :to="{ path: '/post', query: { author: 'JohnDoe' }}">Post by John Doe</router-link>

上述代码会生成一个指向 `/post?author=JohnDoe` 的超链接[^1]。

对于导航守卫或其他 JavaScript 调用中构建带查询参数的目标路径，则应采用下面的方式：

this.$router.push({
  path: '/post',
  query: {
    author: 'JaneSmith'
  }
});

为了读取这些查询参数，在目标组件内部可以访问 `this.$route.query` 对象获取所需的数据并显示出来：

<div>Author: {{ $route.query.author }}</div>

这样就可以轻松地展示由查询参数携带过来的信息了。

#### 处理默认值和多个查询参数

有时可能希望设置某些查询参数有默认值，或者处理多个查询参数的情况。此时可以直接操作 `$route.query` 来实现更复杂的需求。

例如，如果有两个查询参数分别为 `page` 和 `sortOrder`:

const page = parseInt(this.$route.query.page || 1); // 如果没有提供则默认为第一页
const sortOrder = this.$route.query.sortOrder === 'desc' ? 'descending order' : 'ascending order';

以上方法同样适用于其他类型的查询参数组合。