Multi-selection operation (vue3)

Function 1 description: Make multiple selections through the drop-down menu. In the example here, you can only select up to 4 functions. If you need to select more than one, just change the corresponding code. As shown in the picture:

 Description of Function 2: After multiple selections are made, they are displayed above in the form of breadcrumbs, and an item can be closed. The highlighted selection on the left should also be changed accordingly, that is to say, the left and top are synchronized. As shown in the picture:

Simply simulate the data structure on the left:

var options = ref([
    {
        id: 1,
        text: '一区',
        chose: 0
    },
    {
        id: 2,
        text: '二区',
        chose: 0
    },
    {
        id: 3,
        text: '三区',
        chose: 0
    },
    {
        id: 4,
        text: '四区',
        chose: 0
    },
    {
        id: 5,
        text: '五区',
        chose: 0
    },
    {
        id: 6,
        text: '六区',
        chose: 0
    },
    {
        id: 7,
        text: '七区',
        chose: 0
    }
]);

Basic implementation idea: When selecting, collect the corresponding index, highlight it according to the index, and modify the choose (the value of whether to select or not) of the left drop-down content item through the index, and filter out the value of choose as 1 through array filtering. That is, the breadcrumb array (shown above). When deleting an item in breadcrumbs, delete the corresponding data selected by the drop-down on the left through the id (change the corresponding choose value to 0).

How to record the selected index? 

Set, a built-in collection data structure in js, is used here . It allows storing an unordered, unique set of values ​​and can be used for operations such as deduplication, filtering, and sorting. A series of operations are as follows: Specific instructions are commented in the code.

// 选择元素的索引
var selected = ref([]);

let count = 0; // 记录已选择的数量
// 拿到标识了哪一个的索引，根据索引去更改原数组的chose值
function toggleSelect(index) {
    // 创建一个新的 Set 数据结构，命名为 selectedSet，并将 selected.value 数组作为初始值传递给 Set 构造函数
    const selectedSet = new Set(selected.value);

    if (selectedSet.has(index)) {
        selectedSet.delete(index);
        count--;
        // 限制最多4个
    } else if (count < 4) {
        selectedSet.add(index);
        count++;
    }
    //   将 selectedSet 这个 Set 数据结构转换为一个数组，并将该数组赋值给 selected.value
    selected.value = Array.from(selectedSet);

    // 更新原数组中的chose值
    options.value.forEach((item, idx) => {
        item.chose = selectedSet.has(idx) ? 1 : 0;
    });
    console.log("options.value",options.value);
    haschose(options.value)
}
// 面包屑数组
var breadList = ref([]);
function haschose(options) {
    const chosenItems = options.filter(item => item.chose === 1);
    console.log("面包屑",chosenItems);
    breadList = chosenItems
}
// 根据索引关闭对应项
function close(index) {
    // 拿到删除项的id把options里面的项做对应更改
    const removedItem = breadList.splice(index, 1)[0];
    const removedItemId = removedItem.id;
  
  // 更新 selected 数组和 count 变量
  const newSelected = [];
  let newCount = 0;
//   遍历options项修改对应id的项的chose中
  options.value.forEach((item, idx) => {
    if (item.id === removedItemId) {
      item.chose = 0;
    }
    if (item.chose === 1) {
        // 更新最新的值
      newSelected.push(idx);
      newCount++;
    }
  });

  selected.value = newSelected;
  count = newCount;
  console.log("关闭之后的options", options.value);
}