Operación de selección múltiple (vue3)

Descripción de la función 1: Realice selecciones múltiples a través del menú desplegable. En el ejemplo aquí, solo puede seleccionar hasta 4 funciones. Si necesita seleccionar más de una, simplemente cambie el código correspondiente. Como se muestra en la imagen:

 Descripción de la función 2: Después de realizar varias selecciones, se muestran arriba en forma de rutas de navegación y se puede cerrar un elemento. La selección resaltada a la izquierda también debe cambiarse en consecuencia, es decir, la izquierda y la parte superior son sincronizado. Como se muestra en la imagen:

Simplemente simule la estructura de datos de la izquierda:

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
    }
]);

Idea de implementación básica: al seleccionar, recopile el índice correspondiente, resáltelo de acuerdo con el índice y modifique la elección (el valor de seleccionar o no) del elemento de contenido desplegable izquierdo a través del índice y filtre el valor. de elegir como 1 a través del filtrado de matriz, es decir, la matriz de ruta de navegación (que se muestra arriba). Al eliminar un elemento en las rutas de navegación, elimine los datos correspondientes seleccionados en el menú desplegable de la izquierda a través de la identificación (cambie el valor de elección correspondiente a 0).

¿Cómo registrar el índice seleccionado? 

Aquí se utiliza Set, una estructura de datos de recopilación incorporada en js . Permite almacenar un conjunto de valores único y desordenado y puede usarse para operaciones como deduplicación, filtrado y clasificación. Una serie de operaciones son las siguientes: Las instrucciones específicas están comentadas en el código.

// 选择元素的索引
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);
}