最近项目有个需求，需要对穿梭框里面的数据进行框选。然而项目本身是基于ant-design-vue组件库的。antd的组件并不支持这个功能。

好在需求有相关实现的参考。那是一个jquery时代的老项目了。实现起来很nice，只需要使用最原始的select - option 表单标签就行了。因为浏览器本身支持select表单选项的框选多选等快捷操作。

于是事情变得简单了。

从最简单的例子开始写。

   <select multiple>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
   </select>

给select设置multiple属性后，显示上就会变为列表。然而要用到穿梭框上，需要再美化一下。

接下来，我封装了一个组件。

 <template>
<select multiple ref="selectRef" @change="onChange">
 <option v-for="(item, key) in items" :key="key" :value="item.value" :style="optionStyle">
   <slot name="render" v-bind="item">
     {{ item.label }}
   </slot>
 </option>
</select>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
const emit = defineEmits(['change']);
const props = defineProps({
 itemStyle: {
   type: Object,
   default() {
     return {};
   },
 },
 items: {
   type: Array,
   default() {
     return [];
   },
 },
});
const optionStyle = computed(() => {
 return props.itemStyle || {};
});
const onChange = (val) => {
 const arr = [];
 const length = val.target.selectedOptions.length;
 for (let i = 0; i < length; i++) {
   // value 为字符串， _value是原始值
   arr.push(val.target.selectedOptions[i]._value);
 }
 emit('change', arr);
};
</script>

这是最简版的，选择列表从items参数传入，选择的变更通过change 事件提供出去。 随着开发的深入，还发现一些问题。当选择完数据移到另一侧列表的时候，虽然原来选择的数据移除了，但选择状态还呈现在列表中。这时就需要一个方法清除选择。

  const selectRef = ref();
  const resetSelected = () => {
    let arr = [...selectRef.value.selectedOptions];
    for (let i = 0; i < arr.length; i++) {
      arr[i].selected = false;
    }
  };
  defineExpose({
    resetSelected,
  });

列表组件写好了。构想一下最终要呈现的界面

先把template大致定下来

<template>
  <div :class="`${prefixCls}__container`">
    <div :class="`${prefixCls}__left ${prefixCls}__wrapper`">
      <div :class="`${prefixCls}__title-con`">
        <div :class="`${prefixCls}__title`">
          {{ titles[0] || '所有项目' }}
        </div>
        <div :class="`${prefixCls}__number`">
          ({{ leftData.selectedKeys.length > 0 ? `${leftData.selectedKeys.length}/` : ''
          }}{{ leftData.filterItems.length }})
        </div>
      </div>
      <div :class="`${prefixCls}__search`" v-if="showSearch">
        <a-input v-model:value="leftData.searchValue" allow-clear />
      </div>
      <OriginList
        v-if="mode === 'origin'"
        ref="leftoriginRef"
        :items="leftData.filterItems"
        @change="leftChange"
        :item-style="itemStyle"
        :style="listStyle"
      >
        <template #render="item" v-if="mode === 'origin'">
          <slot name="render" v-bind="item"></slot>
        </template>
      </OriginList>
    </div>
    <div :class="`${prefixCls}__operations`">
      <slot name="buttonBefore"></slot>
      <div :class="`${prefixCls}__button`" @click="moveToRight">
        <slot name="rightButton">
          <a-button type="default">
            <DoubleRightOutlined />
          </a-button>
        </slot>
      </div>
      <slot name="buttonCenter"></slot>
      <div :class="`${prefixCls}__button`" @click="moveToLeft">
        <slot name="leftButton">
          <a-button type="default">
            <DoubleLeftOutlined />
          </a-button>
        </slot>
      </div>
      <slot name="buttonAfter"></slot>
    </div>
    <div :class="`${prefixCls}__right ${prefixCls}__wrapper`">
      <div :class="`${prefixCls}__title-con`">
        <div :class="`${prefixCls}__title`">
          {{ titles[1] || '已选项目' }}
        </div>
        <div :class="`${prefixCls}__number`">
          ({{ rightData.selectedKeys.length > 0 ? `${rightData.selectedKeys.length}/` : ''
          }}{{ rightData.filterItems.length }})
        </div>
      </div>
      <div :class="`${prefixCls}__search`" v-if="showSearch">
        <a-input v-model:value="rightData.searchValue" allow-clear />
      </div>
      <OriginList
        v-if="mode === 'origin'"
        ref="rightoriginRef"
        :items="rightData.filterItems"
        @change="rightChange"
        :item-style="itemStyle"
        :style="listStyle"
      >
        <template #render="item" v-if="mode === 'origin'">
          <span :style="itemStyle">
            <slot name="render" v-bind="item"></slot>
          </span>
        </template>
      </OriginList>
    </div>
  </div>
</template>

可以看到，左右两侧都分别有头部，搜索框，列表。
这两个列表有很多方法和状态是相同的。这时vue3 的composition Api 的优势就发挥出来了。

写一个方法，包含这些状态：

import { reactive, computed, watch } from 'vue';
export function useList() {
  const data = reactive({
    filterItems: [],
    searchValue: '',
    selectedKeys: [],
    checkAll: false,
  });
  function selectedChange(val) {
    data.selectedKeys = val;
  }

  return {
    data,
    selectedChange,
  };
}

在穿梭框主体script上：

<script setup lang="ts" name="ExtTransfer">
  import { ref, computed, watch, watchEffect } from 'vue';
  import OriginList from './OriginList.vue';
  import { useList } from './hooks/useList';
  const props = defineProps({
    showSearch: {
      type: Boolean,
      default: true,
    },
    dataSource: {
      type: Array,
      default() {
        return [];
      },
    },
    targetKeys: {
      type: Array,
      default() {
        return [];
      },
    },
    filterOption: {
      type: Function,
      default: filterOption,
    },
    listStyle: {
      type: Object,
      default() {
        return {};
      },
    },
    titles: {
      type: Array,
      default() {
        return [];
      },
    },
    itemStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  });
  const emit = defineEmits(['change']);
  // 左侧框
  const leftoriginRef = ref();
  const { data: leftData, indeterminate: leftIndete, selectedChange: leftChange } = useList();
  // 右侧框
  const rightoriginRef = ref();
  const { data: rightData, indeterminate: rightIndete, selectedChange: rightChange } = useList();

  const targetKeys = ref([]);
  const targetItems = computed(() => {
    return props.dataSource.filter((item) => {
      return targetKeys.value.includes(item.value);
    });
  });
  watch(
    () => props.targetKeys,
    (val) => {
      targetKeys.value = val;
    },
    {
      immediate: true,
    },
  );
  watchEffect(() => {
    const leftSearch = leftData.searchValue;
    const rightSearch = rightData.searchValue;
    if (leftSearch.trim() === '') {
      leftData.filterItems = props.dataSource.filter((item) => {
        return !targetKeys.value.includes(item.value);
      });
    } else {
      leftData.filterItems = props.dataSource.filter((option) => {
        return !targetKeys.value.includes(option.value) && props.filterOption(leftSearch, option);
      });
    }
    if (rightSearch.trim() === '') {
      rightData.filterItems = [...targetItems.value];
    } else {
      rightData.filterItems = targetItems.value.filter((option) => {
        return props.filterOption(rightSearch, option);
      });
    }
  });
  function moveToRight() {
    leftoriginRef.value?.resetSelected();
    targetKeys.value = [...targetKeys.value, ...leftData.selectedKeys];
    leftData.selectedKeys = [];
    emit('change', targetKeys.value);
  }
  function moveToLeft() {
    const arr = [];
    const length = targetKeys.value.length;
    for (let i = 0; i < length; i++) {
      const item = targetKeys.value[i];
      if (!rightData.selectedKeys.includes(item)) {
        arr.push(item);
      }
    }
    targetKeys.value = arr;
    rightData.selectedKeys = [];
    rightoriginRef.value?.resetSelected();
    emit('change', targetKeys.value);
  }
  function resetSearch() {
    leftData.searchValue = '';
    rightData.searchValue = '';
  }
  defineExpose({
    resetSearch,
  });
</script>

穿梭框在参数设计上，为了照顾使用习惯，尽量跟随ant design vue 穿梭框的参数，为了使代码简洁。使用watchEffet方法进行监听。这样，不管在搜索或者数据源变动时，列表都能刷新。