黑豹程序员-elementplus的el-transfer穿梭组件，实现城市选择，并支持拼音检索过滤

功能

ElementPlus 的el-transfer组件，实现城市的选择

效果图

实现代码

<template>
  <div class="">
    <el-transfer
        filterable
        :titles="['用户列表','收邮件用户列表']"
        :filter-method="filterMethod"
        filter-placeholder="请输入城市拼音"
        v-model="value"
        :data="data"
        @change="change"
    >
    </el-transfer>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  {
    label: '上海',
    key: '上海',
    pinyin: 'shanghai',
  },
  {
    label: '北京',
    key: '北京',
    pinyin: 'beijing',
  },
  {
    label: '广州',
    key: '广州',
    pinyin: 'guangzhou',
  },
  {
    label: '深圳',
    key: '深圳',
    pinyin: 'shenzhen',
  },
  {
    label: '南京',
    key: '南京',
    pinyin: 'nanjing',
  },
  {
    label: '西安',
    key: '西安',
    pinyin: 'xian',
  },
  {
    label: '成都',
    key: '成都',
    pinyin: 'chengdu',
  },
]);

const value = ref([]);

const filterMethod = (query, item) => {
  return item.pinyin.indexOf(query) > -1;
};

const change = (a) => {
  console.log(a);
};
</script>