iview select选中值取值_iView的Select选择框

目录

在此先列出解决了那些问题，以防读者看完了没有用处：

1、示例，最基础的使用方法

2、传参，传多个值的方式

3、默认值

4、清空重置无效

5、可搜索的用法及如何限制搜索字符长度

一、示例

html:

{ {item.name}}

js:

data: {

formSend: {

name: '',

code: ''

},

dataList: [{

id: 1,

name: '中国',

code: 'china'

}]

},

methods: {

getItemValue(val) {

// 当下拉框的值改变后，这里可以通过改变的值向后台发送请求获取其他数据。

// 可以通过函数默认的返回值 val 获取到下拉框选中的值

// 也可以通过select绑定的值 this.formSend.code 获取到下拉框选中的值

},

}

二、传参：获取多个与选项相关的值

1、同时获取option绑定值和显示值

一个下拉框，下拉列表里面option显示一个值，绑定一个值，select上面绑定的值是选中的option绑定的值，一般情况向后台发送select绑定的值就可以了，但是现在要求把选中的option显示的那个值也同时发送给后台。

解决方法

通过on-change方法来获取选中的列表项的文本，默认情况下，这个方法返回的是选中的绑定值，但iview提供了一个label-in-value属性，可以让显示的label和绑定的value值同时返回。返回的是一个对象，通过属性来获取想要的值。

html:

{ {item.name}}

js:

data: {

formSend: {

name: '',

code: ''

},

dataList: [{

id: 1,

name: '中国',

code: 'china'

}]

},

methods: {

getItemName (val) {

this.formSend.name = val.label

// 这里直接获取显示的值就可以了，绑定的值可以通过select上面绑定的值取得

},

}

2、传参需要选中项的多个相关值

解决方式一

在option上添加点击事件，通过点击事件传参来获取更多值。

注意在点击事件上加修饰符.native，否则事件不生效。

html:

{ {item.name}}

js:

data: {

f