写在前面的

   在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函数的情况下套用。

Logo

前往低代码交流专区

更多推荐