<template>
  <list-layout>
    <ks-transfer
      v-model="value"
      :list="list"
      :mapProps="{
        key: 'areaName',
        label:'areaId'
      }"
    >
      <template
        slot="option"
        slot-scope="option"
      >
        <div class="option-wrap">
          <span>{{option.data.areaId}}</span>
          <span>{{option.data.areaName}}</span>
        </div>
      </template>
    </ks-transfer>
    <el-button @click="getData">刷新数据</el-button>
  </list-layout>
</template>

<script>
export default {
  name: 'transferPage',
  data() {
    return {
      list: [],
      value: [],
    };
  },
  methods: {
    getData() {
      this.list = [
        { areaId: "22", areaName: '' },
        { areaId: "23", areaName: '新疆昌吉职业技术学院' },
        { areaId: "24", areaName: '沈阳药科大学溪湖校区' },
        { areaId: "25", areaName: '山东大学兴隆山校区' },
        { areaId: "26", areaName: '山东师范大学长清湖校区' },
        { areaId: "27", areaName: '山东交通学院长清校区' },
        { areaId: null, areaName: '上海滢致校区' },
        { areaId: "35", areaName: '沈阳职业技术学院' },
        { areaId: "36", areaName: '嘉兴南洋职业技术学院浙江校区' },
        { areaId: "56", areaName: '长安区教育局' },
        { areaId: "15", areaName: '多彩温江校区' },
      ];
      this.value = [];
    },
  },
};
</script>

<style lang="scss">
.option-wrap {
  display: flex;
  justify-content: space-between;
}
</style>
