Element UI Checkbox Group: 自定义排序方式 | v-model 绑定技巧

要改变 el-checkbox-group 的 v-model 绑定默认排序方式，可以通过以下步骤实现：

1. 创建一个新的计算属性，用于存储默认排序方式的值。例如，可以在 data 中添加一个名为 defaultSort 的属性，并将其初始值设置为默认排序方式。

data() {
  return {
    defaultSort: 'name' // 默认排序方式为按照名称排序
  }
}

2. 在 el-checkbox-group 上绑定 v-model 指令，并将其值设置为 defaultSort。

<el-checkbox-group v-model='defaultSort'>
  <!-- checkbox 选项 -->
</el-checkbox-group>

3. 在 computed 中定义一个新的计算属性，用于根据选择的排序方式对数据进行排序。可以使用 Array 的 sort 方法来实现排序逻辑。

computed: {
  sortedData() {
    // 对数据进行排序
    return this.data.sort((a, b) => {
      // 根据选择的排序方式进行比较
      if (this.defaultSort === 'name') {
        return a.name.localeCompare(b.name); // 按照名称排序
      } else if (this.defaultSort === 'age') {
        return a.age - b.age; // 按照年龄排序
      } else if (this.defaultSort === 'date') {
        return new Date(a.date) - new Date(b.date); // 按照日期排序
      }
    });
  }
}

4. 在模板中使用 sortedData 来展示已排序的数据。

<el-checkbox-group v-model='defaultSort'>
  <!-- checkbox 选项 -->
</el-checkbox-group>

<!-- 展示已排序的数据 -->
<ul>
  <li v-for='item in sortedData' :key='item.id'>{{ item.name }}</li>
</ul>

通过以上步骤，就可以实现根据选择的排序方式对数据进行默认排序。当选择的排序方式改变时，sortedData 会自动更新以展示新的排序结果。