element的transfer 穿梭框自定義搜索

<template>
  <el-transfer
    filterable
    :filter-method="filterMethod"
    filter-placeholder="請輸入城市拼音"
    v-model="value"
    :data="data">
  </el-transfer>
</template>

<script>
  export default {
    data() {
      const generateData = _ => {
        const data = [];
        const cities = ['上海', '北京', '廣州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
      return {
        data: generateData(),
        value: [],
        /*
        * 使用 filter-method 定義自己的搜索邏輯。
        * filter-method 接收一個方法，當搜索關鍵字變化時，
        * 會將當前搜索的關鍵字和每個數據項傳給該方法。若方法返回 true，則會在搜索結果中顯示對應的數據項。
        */
        filterMethod(query, item) {
          console.log(query, item)//搜索的關鍵字 shanghai item則是data中的一條數據
          // 如果要檢索的字符串值沒有出現，則該方法返回 -1,   搜索到為0  0>-1 大於-1是檢索出現了
          console.log(item.pinyin.indexOf(query) > -1) //true
          return item.pinyin.indexOf(query) > -1;
        }
      };
    }
  };
</script>