select标签内设置全选

我看了一下官方那边有多选的api没有全选的，这个搞起来就麻烦一点了，当时拿到这个任务的时候，我还取看了一下下拉菜单Dropdrown,在里面套多选，但是这样做要改的地方也贼鸡多，想想还是烦了，在select自己加一个全选的选项，下面是第一次尝试，但是有问题，循环不出来全部内容，只显示第一条数据:

<template>
  <a-select v-model="selectedOptions" mode="multiple" style="width: 300px">
    <a-select-option key="all" value="all">全选</a-select-option>
    <a-select-option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</a-select-option>
  </a-select>
</template>

这样做是错的，先给你们列举出来

然后我重新尝试了别的方法，最后还是决定，直接操作数据解决

Options.value.unshift({ value: '全部', label: '全部' });

这是在数组第一个数据上插入数据‘全部’

同时去监听内容，出现全部时，绑定数据只有全部。

watch(
  () => selected.value,
  (newSelected) => {
    if (newSelected.includes('全国')) {
      selected.value = ['全国'];
    } else {
      return;
    }
  }
);

做完这，就剩下回传的时间处理数据了，这边是这么搞的

 let selectedName = '';
  if (selectedArea.value.includes('全国')) {
    let areaName = JSON.parse(JSON.stringify(Options.value));
    areaName.splice(0, 1);
    selectedName = areaName.map((item) => item.value).join(',');
  } else if (selectedArea.value.length > 0) {
    selectedName = selectedArea.value.join(',');
  } else {
    return;
  }

到这就完活了，有什么问题欢迎来讨论