在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;