需求
有三个选择框，用于排序展示数据，按照用户点击的顺序依次展示数据
例：用户点击
变量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>
