穿梭框-获取右侧数据

穿梭框——获取到右侧的数据

 

<template>
  <div class="">
//穿梭框，data是所有数据，value是右侧的数据（只是数据data的key），change是当右侧数据发生变化时的事件
    <el-transfer
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入城市拼音"
      v-model="value"
      :data="data"
      @change="change"
    >
    </el-transfer>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  methods: {
//右侧数据发生变法时触发的事件，第一个参数时右侧的数据（数据的key）
    change(a) {
//循环右侧数据，根据右侧数据给出的key，嵌套循环原始数据
//找到原始数据对应的项，压入right数组
      for (let i = 0; i < a.length; i++) {
        this.data.forEach((item) => {
          if (item.key == a[i]) {
            this.right.push(item.label);
          }
        });
      }
      console.log(this.right);
    },
  },
  props: [],
  computed: {},
  mounted() {},
  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 {
      // 右侧的数据
      right: [],
      data: generateData(),
      value: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
    };
  },
};
</script>

<style lang="scss" scoped>
</style>