antd 中 穿梭框的使用

穿梭選擇框用直觀的方式在兩欄中移動元素，完成選擇行為。

選擇一個或以上的選項后，點擊對應的方向鍵，可以把選中的選項移動到另一欄。
其中，左邊一欄為 source，右邊一欄為 target

 

<template>
  <div>
    <a-transfer
      show-search
      :data-source="mockData"
      :target-keys="targetKeys"
      :render="(item) => item.title"
      :filter-option="filterOption"
      @search="handleSearch"
      @change="handleChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      mockData: [],
      targetKeys: [],
    };
  },
  mounted() {
    this.getMockData();
  },
  methods: {
    getMockData() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content ${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          console.log(1132);
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData;
      this.targetKeys = targetKeys;
    },
    handleSearch(dir, value) {
      console.log("dir", dir); //左邊||右邊
      console.log("value", value); //搜索的值
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log("targetKeys",targetKeys);
      console.log("direction",direction);
      console.log("moveKeys",moveKeys);
      this.targetKeys = targetKeys;
    },
    filterOption(inputValue,option){
      console.log("inputValue",inputValue);
      console.log("option",option);
      return option.description.indexOf(inputValue)>-1
    }
  },
};
</script>