element-ui中的穿梭框

在element-ui中有一个不常用但还是比较炫的一个组件，就是穿梭框。他要实现的就是把左面的选中然后传送到右面表示选中，或者右面的传送到左面表示取消。首先我们看文档的话会得到基本的穿梭框代码；即：

<template>
  <el-transfer
    v-model="value2"
    :data="data2">
  </el-transfer>
</template>

<script>
  export default {
    data() {
      function generateData2 () {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index
          });
        });
        return data;
      };
      return {
        data2: generateData2(),
        value2: [],
      };
    }
  };
</script>

首先我们来分析一下，cities是放数据的地方，data是左边数据，value2是右面的数据；首先会将cities数组中的数据使用forEach遍历一遍，将item=city和index加入到data里，返回data；然后data2调用这个函数，获得数据。使用v-model进行双向数据绑定，:data2得到数据；一切就绪，简单的就做好了。接下来进入正题：如何从后台接口获取数据：

//template中的不变,在generateData2()中加入查询数据的代码
axios.get('接口地址').then(({data:result})=>{
					// console.log(result.data);
					var q = result.data;
					// console.log(q);
					q.forEach(({id,name,questionType,options})=>{
						var k={
							id,
							name,
							questionType,
							options
						}
					data.push({
						key:k.id,
						label:name,
					})
				})
					// console.log(data)
					return data;
				}).catch(()=>{
					this.$notify.error({
						title:'错误',
						message:'服务器异常'
					})
				});
		        return data;