JS 数据排序展示

需求

有三个选择框，用于排序展示数据，按照用户点击的顺序依次展示数据

例：用户点击 变量1——>变量3——>变量2，数据按顺序展示 数据1——>数据3——>数据2；
用户点击 变量3——>变量1，数据按顺序展示 数据3——>数据1

分析

大体可以分为几个步骤：数据整合，数据排序，数据展示

解决

方案一：利用数组的排序解决（不建议）

<!--
 * @Description: file content
 * @Version: 2.0
 * @Autor: Hu Kang
 * @Date: 2023-06-09 17:55:37
 * @LastEditors: Hu Kang
 * @LastEditTime: 2023-06-09 18:51:27
 * @FilePath: \src\views\page\test\index.vue
-->

<template>
  <div class="container">
    变量展示：
    <a-checkbox-group v-model="numList">
      <a-checkbox v-for="(item, index) in VaribleList" :key="item.value" :value="index + 1">
        {{ item.label }}
      </a-checkbox>
    </a-checkbox-group>
    <a-button type="primary" @click="listSort">提交</a-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 列表绑定
const numList = ref([]);
// 变量列表
const VaribleList = ref<object[]>([
  { label: '变量1', value: 1 },
  { label: '变量2', value: 2 },
  { label: '变量3', value: 3 }
])
// 数据集合
const dataList = ref<object[]>([]);
function listSort() {
  dataList.value.length = 0;//置空
  VaribleList.value.sort((a, b) => {
    let indexA = numList.value.indexOf(VaribleList.value.indexOf(a) + 1);
    let indexB = numList.value.indexOf(VaribleList.value.indexOf(b) + 1);
    return indexA - indexB;
  });
  console.log(VaribleList.value);
}

</script>

<style lang="less" scoped>
.container {
  width: 600px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  text-align: center;
}
</style>

因为该方案有弊端，排序只可对数组全部选项进行排序，无法对单独选中某几个数据进行排序，因此建议使用**方案二**

方案二：使用 for 循环结合 switch 解决（建议）

<template>
  <div class="container">
    变量展示：
    <a-checkbox-group v-model="numList" @change="clickVarible">
      <a-checkbox v-for="(item, index) in VaribleList" :key="item.value" :value="index + 1">
        {{ item.label }}
      </a-checkbox>
    </a-checkbox-group>
    <a-button type="primary" @click="listSort">提交</a-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 列表绑定
const numList = ref([]);
// 变量列表
const VaribleList = ref<object[]>([
  { label: '变量1', value: 1 },
  { label: '变量2', value: 2 },
  { label: '变量3', value: 3 }
])
// 数据集合
const dataList = ref<object[]>([]);
function listSort() {
  dataList.value.length = 0;//置空
  for (let index = 0; index < numList.value.length; index++) {
    switch (numList?.value[index]) {
      case 1:
        dataList.value.push({
          name: '变量1',
          data: ['v1', 'v1']
        })
        break;
      case 2:
        dataList.value.push({
          name: '变量2',
          data: ['v2', 'v2']
        })
        break;
      case 3:
        dataList.value.push({
          name: '变量3',
          data: ['v3', 'v3']
        })
        break;
      default:
        break;
    }

  }
  console.log(dataList.value);
}

/* BEGIN 可以不用
// 变量重置列表
const resetList = () => {
  return ['未选择', '未选择', '未选择']
}
// 变量存储列表
const resultList = ref(resetList())
function clickVarible(data: any) {
  resultList.value = resetList()
  if (numList.value?.length) {
    numList.value.forEach((ele, idx) => {
      resultList.value[ele - 1] = idx + 1
    })
  }
}
 */
</script>

<style lang="less" scoped>
.container {
  width: 600px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  text-align: center;
}
</style>