目录
在此先列出解决了那些问题，以防读者看完了没有用处：
1、示例，最基础的使用方法
2、传参，传多个值的方式
3、默认值
4、清空重置无效
5、可搜索的用法及如何限制搜索字符长度
一、示例
html:
<Select @on-change="getItemValue" v-model="formSend.code">
<Option :value="item.code" v-for="item in dataList" v-bind:key="item.id">{{item.name}}</Option>
</Select>
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:
<Select :label-in-value="true" @on-change="getItemName" v-model="formSend.code">
<Option :value="item.code" v-for="item in dataList" v-bind:key="item.id">{{item.name}}</Option>
</Select>
js:
data: {
formSend: {
name: '',
code: ''
},
dataList: [{
id: 1,
name: '中国',
code: 'china'
}]
},
methods: {
getItemName (val) {
this.formSend.name = val.label
// 这里直接获取显示的值就可以了，绑定的值可以通过select上面绑定的值取得
},
}
2、传参需要选中项的多个相关值
解决方式一
在option上添加点击事件，通过点击事件传参来获取更多值。
注意在点击事件上加修饰符.native，否则事件不生效。
html:
<Select v-model="formSend.code">
<Option :value="item.code" @click.native="getMoreParams(item)" v-for="item in dataList" v-bind:key="item.id">{{item.name}}</Option>
</Select>
js:
data: {
formSend: {
name: '',
code: '',
id: ''
},
dataList: [{
id: 1,
name: '中国',
code: 'china'
}]
},
methods: {
getMoreParams (obj) {
this.formSend.name = obj.name
this.formSend.id= obj.id
},
}
解决方式二
只向后台传递一个参数，但是这个参数包含了多个相关的值，是一个多值通过特殊符号（逗号，冒号等）拼接成的字符串，后台再以相应的顺序解析参数（与后台沟通）。
html:
<Select v-model="formSend.code">
<Option :value="item.code+':'+item.name" v-for="item in dataList" v-bind:key="item.id">{{item.name}}</Option>
</Select>
js:
data: {
formSend: {
code: '',
id: ''
},
dataList: [{
id: 1,
name: '中国',
code: 'china'
}]
},
三、设置默认值
单一默认值
如果是固定的默认值，只需要在data中定义变量的时候设置即可，将select绑定的值设置为option的value值
<Select v-model="formSend.code">
<Option :value="item.code" v-for="item in dataList" v-bind:key="item.id">{{item.name}}</Option>
</Select>
data: {
formSend: {
code: 'China'
},
dataList: [{
id: 1,
name: '中国',
code: 'China'
}, {
id: 2,
name: '美国',
code: 'America'
}]
},
动态默认值
如果是动态的根据某个不确定的值来设置不同的默认值，就需要搞事情了。
需求
判断某个日期是不是今天
1、如果是今天，需要判断当前时间
如果当前时间小于14点，则将默认时间设置为14点
同时时间数组为当前时间后的整点开始到次日6点 (小于6点则从6点开始)
如果当前时间大于14点，则将默认时间设置为当前时间后的整点
同时时间数组为当前时间后的整点开始到次日6点
2、如果不是今天
将默认时间设置为14点
同时时间数组为从6点到次日6点
代码
<Select v-model="arriveLateTime">
<Option v-for="item in arriveLateTimeArr" :value="item.timeSend" :key="item.timeSend">{{ item.timeShow }}</Option>
</Select>
data: {
arriveLateTime: '',
arriveLateTimeArr: [{timeSend: '1300', timeShow: '13:00'}]
},
methods: {
setTimeArr (val) {
// 今天
if (new Date().toLocaleDateString() == new Date(val).toLocaleDateString()) {
var nowHour = new Date().getHours()
if (nowHour < 6) {
nowHour = 6
}else {
nowHour++
}
this.arriveLateTimeArr = []
for( ; nowHour<24; nowHour++) {
this.arriveLateTimeArr.push({
timeSend: nowHour<10 ? '0'+nowHour+'00' : nowHour+'00',
timeShow: nowHour<10 ? '0'+nowHour+':00' : nowHour+':00',
})
}
this.arriveLateTimeArr.push(
{ timeSend: '2359', timeShow: '23:59' },
{ timeSend: '0100', timeShow: '次日01:00' },
{ timeSend: '0200', timeShow: '次日02:00' },
{ timeSend: '0300', timeShow: '次日03:00' },
{ timeSend: '0400', timeShow: '次日04:00' },
{ timeSend: '0500', timeShow: '次日05:00' },
{ timeSend: 'Y0600', timeShow: '次日06:00' }
)
// 非今天
}else {
this.arriveLateTimeArr = [
{ timeSend: '0600', timeShow: '06:00' },
// ...省略
{ timeSend: 'Y0600', timeShow: '次日06:00' }
]
}
},
setDefaultTime (val) {
// 今天
if (new Date().toLocaleDateString() == new Date(val).toLocaleDateString()) {
var nowTime = new Date().getHours()
if (nowTime < 14) {
this.arriveLateTime = '1400'
}else {
nowTime++
this.arriveLateTime = nowTime+'00'
}
// 非今天
}else {
this.arriveLateTime = '1400'
}
}
}
重点在这里：
最初的时候，我把设置默认值和设置option数组的逻辑写在了一起，在created生命周期中调用，设置默认值并没有起作用。
后来将设置默认值和设置option数组分开来写，在created生命周期中设置option数组，在mounted生命周期中设置默认值，此时设置默认值才生效。
created () {
this.setTimeArr('2018-10-20')
},
mounted () {
this.setDefaultTime('2018-10-20')
},
(后期补充：现在想来，也许用this.$nextTick应该也是可以的，只要赋值数组与赋值默认值不同时期即可，未尝试，此为后期补充文章时的想法)
四、设置清空重置无效
这种情况下通常是使用form表单的清空方法无效
<Select ref="resetSelect" v-model="formSend.code">
<Option :value="item.code" v-for="item in dataList" v-bind:key="item.id">{{item.name}}</Option>
</Select>
方式一 select的清空重置方法
this.$refs.resetSelect.clearSingleSelect()
方式二 手动将select的查询条件赋值为空
this.$refs.resetSelect.query = ''
方式三 设置select的查询词
仅在可搜索的情况下可使用
this.$refs.resetSelect.setQuery('')
五、可搜索
前端搜索
普通用法
只需添加一个filterable属性即可，
<Select ref="resetSelect" v-model="formSend.code" filterable not-found-text=''>
<Option :value="item.code" v-for="item in dataList" v-bind:key="item.id">{{item.name}}</Option>
</Select>
设置搜索词最大长度
这里使用了搜索词改变的方法，当搜索词改变后判断它的长度，如果大于指定的长度就将它截取。重新赋值，赋值的方法两种都可以。
有个问题是，本来我以为selectDOM是个对象，但是有时候却为数组（在不同页面使用），并没有去深究原因，只是做了判断类型。
<Select ref="querySelect" @on-query-change="queryChange" v-model="formSend.code" filterable not-found-text=''>
<Option :value="item.code" v-for="item in dataList" v-bind:key="item.id">{{item.name}}</Option>
</Select>
data: {
formSend: {
name: '',
code: ''
},
dataList: [{
id: 1,
name: '中国',
code: 'china'
}]
},
methods: {
queryChange (query) {
if (query.length > 50) {
let tempQuery = query.substring(0, 50);
this.$nextTick(() => {
// 数组
if (Array.isArray(this.$refs.querySelect)) {
// this.$refs.querySelect[0].query = tempQuery
this.$refs.querySelect[0].setQuery(tempQuery)
// 对象
}else if (typeof this.$refs.querySelect=== 'object') {
this.$refs.querySelect.query = tempQuery
// this.$refs.querySelect.setQuery(tempQuery)
}
})
}
},
}
后端搜索
用到了lodash做防抖，使用后端接口做远程搜索
import _ from 'lodash'
<Select
v-model="formUser.name"
filterable
label-in-value
remote
:remote-method="findUser"
:loading="userFinding"
@on-change="userSelect"
not-found-text=''>
<Option v-for="item in userFindArr" :value="item.id" :key="item.id">{{item.name}}</Option>
</Select>
data
formUser: {
name: '',
},
userFindArr: [], // 人员数组
userFinding: false, // 搜索用户
methods
// 搜索用户
findUser: _.debounce( function (val) {
this.userFinding = true;
setTimeout(() => {
this.userFinding = false;
const params = {
inputText: val
}
api.roleManage.roleFindSelect(params).then(res => {
if (res.status === 200) {
this.userFindArr = res.data || []
}
})
}, 200)
}, 500),
// 选择用户,当绑定的值为id,显示的值为name时。
// 当选择结果后，会出现短暂的显示id，然后显示name
// 解决：当改变后用选择的名字进行再次搜索，此时显示的就是名字
userSelect (obj) {
console.log('select', obj)
if (obj == null) {
return false
}
this.findUser(obj.label)
},
