<template>
  <div>
        <el-transfer v-model="value" :data="data" filterable
    :filter-method="filterMethod"
    filter-placeholder="请输入城市拼音"></el-transfer>
        <p>{{data}}</p>


        <p>{{value}}</p>
  </div>
</template>

<script>
  /**export default {
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        value:null,
        color: "rgba(0, 255, 64, 0.51)",
        data: [ { "key": 1, "label": "备选项 1", "disabled": false }, { "key": 2, "label": "备选项 2", "disabled": false }, { "key": 3, "label": "备选项 3", "disabled": false }, { "key": 4, "label": "备选项 4", "disabled": true }, { "key": 5, "label": "备选项 5", "disabled": false }, { "key": 6, "label": "备选项 6", "disabled": false }, { "key": 7, "label": "备选项 7", "disabled": false }, { "key": 8, "label": "备选项 8", "disabled": true }, { "key": 9, "label": "备选项 9", "disabled": false }, { "key": 10, "label": "备选项 10", "disabled": false }, { "key": 11, "label": "备选项 11", "disabled": false }, { "key": 12, "label": "备选项 12", "disabled": true }, { "key": 13, "label": "备选项 13", "disabled": false }, { "key": 14, "label": "备选项 14", "disabled": false }, { "key": 15, "label": "备选项 15", "disabled": false } ],
        value: []
      }

    }
  }**/


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: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      }
    };
  }
};

</script>

<style>

</style>