寫在前面的

   在Iview.js的眾多元件中，drop selection也是使用比較頻繁的元件之一，下面就用最為簡單的方法來實現下拉框中資料的動態繫結。

Select Option 元件

靜態資料繫結

• 首先，我們先了解一下官方API文件中的例子

  • 效果圖
    

  • 程式碼示例：

<template>
    <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value"
 
>{{ item.label }}</Option>
    </Select>
</template>
<script>
//這裡需要說明的是，在返回的citylist中，使用雙向資料繫結；
//可以看到，頁面標籤<select>內部寫有<option>選項的v-for迴圈，:value代表citylist中的value值，:key代表資料標識,{{這裡代表選項中需要顯示什麼}}
    export default {
        data () {
            return {
                cityList: [
                    {
                        value: 'New York'
 
,
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa'
 
,
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
                model1: ''
            }
        }
    }
</script>

動態資料繫結

動態繫結

• 很簡單，我們還是使用axios的get方式，從後臺獲取返回值，然後動態繫結到citylist中

<Select clearable filterable style="width:120px">
    <Option v-for="item in citylist" :value="item.value":key="item.value">{{item.label}}</Option>
</Select>

import axios from 'axios'
//定義全域性常量路由，方便其他方法呼叫
const url="localhost:8888/api/querycity"
 export default {
        data () {
            return {
            //這裡需要注意的是，返回的資料citylist中不需要宣告任何屬性和內容。
                cityList: []
                }
        },
        methods:{
            queryAllCity(){
                axios.get(url)
                .then(function(reponse){
                //將後臺返回的資料繫結給citylist，需要注意的是：
                //由於在option中迴圈顯示的是label，標記的是value所以後臺返回的list中必須也要含有label和value屬性
                    this.citylist=response.data
                })
                .catch(function(error){
                    alert(error)
                })
            }
        }

}

• .NET後臺程式碼

[RoutePrefix("api")]
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class OrderController : ApiController{
    [HttpGet]
    [Route("querycity")]
    public IList<city> getCity(){
        //將citylist返回給前臺
        return citylist;
    }
}

• 到這裡，我們就成功的把查詢出來的資料繫結到了前端的元件中了

獲取滑鼠選取的option選項的返回值

• 說道這裡，不得不說vue的機制很贊。只要是涉及到頁面值的獲取，我們都可以使用這樣的方法來獲取，我們使用v-model來獲取頁面選取的option值

//在這裡，我們的select標籤發生了變化，增加了v-model
//item是script中定義的一個物件，cityID是其中的屬性
<Select v-model="item.cityID" clearable filterable style="width:120px">
    <Option v-for="item in citylist" :value="item.value":key="item.value">{{item.label}}</Option>
</Select>

 export default {
        data () {
            return {
                cityList: [],
                //我們在這裡定義item物件，並定義其中的屬性，預設為空
                item:{cityID:''}
                }
        },
        methods:{
            queryAllCity(){
                axios.get(url)
                .then(function(reponse){
                //將後臺返回的資料繫結給citylist，需要注意的是：
                //由於在option中迴圈顯示的是label，標記的是value所以後臺返回的list中必須也要含有label和value屬性
                    this.citylist=response.data
                })
                .catch(function(error){
                    alert(error)
                })
            }
            //繼續上面的方法，我們需要將選擇到的資料傳到後臺方法
            queryCityByID(){
                //這裡就要說一下:key的用處了，由於key繫結的是value，所以item.cityID獲取到你選中的值，也是value，雖然顯示的是label中的內容，但是當你選擇了某一個城市，那麼獲取的是value的值
                var _temp=this.item.cityID
                //這裡可以傳物件或者引數，取決於後臺的寫法
                axios.post(url,_temp/*或者item*/)
                .then(function(response){
                    /*********/
                })
                .catch(function(error){
                    /**********/
                }
            }
        }
}

總結

   所有的Iview的元件實現雙向繫結或者查詢都可以使用這一個套路，包括比較困難的Tree元件，也可以在不適用render函式的情況下套用。