JS 数据排序展示

需求：

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

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

解决

使用 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>