目錄

在此先列出解決了那些問題，以防讀者看完了沒有用處：

1、示例，最基礎(chǔ)的使用方法

2、傳參，傳多個(gè)值的方式

3、默認(rèn)值

4、清空重置無效

5、可搜索的用法及如何限制搜索字符長(zhǎng)度

一、示例

html:

{{item.name}}

js:

data: {

formSend: {

name: '',

code: ''

},

dataList: [{

id: 1,

name: '中國(guó)',

code: 'china'

}]

},

methods: {

getItemValue(val) {

// 當(dāng)下拉框的值改變后，這里可以通過改變的值向后臺(tái)發(fā)送請(qǐng)求獲取其他數(shù)據(jù)。

// 可以通過函數(shù)默認(rèn)的返回值 val 獲取到下拉框選中的值

// 也可以通過select綁定的值 this.formSend.code 獲取到下拉框選中的值

},

}

二、傳參：獲取多個(gè)與選項(xiàng)相關(guān)的值

1、同時(shí)獲取option綁定值和顯示值

一個(gè)下拉框，下拉列表里面option顯示一個(gè)值，綁定一個(gè)值，select上面綁定的值是選中的option綁定的值，一般情況向后臺(tái)發(fā)送select綁定的值就可以了，但是現(xiàn)在要求把選中的option顯示的那個(gè)值也同時(shí)發(fā)送給后臺(tái)。

解決方法

通過on-change方法來獲取選中的列表項(xiàng)的文本，默認(rèn)情況下，這個(gè)方法返回的是選中的綁定值，但iview提供了一個(gè)label-in-value屬性，可以讓顯示的label和綁定的value值同時(shí)返回。返回的是一個(gè)對(duì)象，通過屬性來獲取想要的值。

html:

{{item.name}}

js:

data: {

formSend: {

name: '',

code: ''

},

dataList: [{

id: 1,

name: '中國(guó)',

code: 'china'

}]

},

methods: {

getItemName (val) {

this.formSend.name = val.label

// 這里直接獲取顯示的值就可以了，綁定的值可以通過select上面綁定的值取得

},

}

2、傳參需要選中項(xiàng)的多個(gè)相關(guān)值

解決方式一

在option上添加點(diǎn)擊事件，通過點(diǎn)擊事件傳參來獲取更多值。

注意在點(diǎn)擊事件上加修飾符.native，否則事件不生效。

html:

{{item.name}}

js:

data: {

formSend: {

name: '',

code: '',

id: ''

},

dataList: [{

id: 1,

name: '中國(guó)',

code: 'china'

}]

},

methods: {

getMoreParams (obj) {

this.formSend.name = obj.name

this.formSend.id= obj.id

},

}

解決方式二

只向后臺(tái)傳遞一個(gè)參數(shù)，但是這個(gè)參數(shù)包含了多個(gè)相關(guān)的值，是一個(gè)多值通過特殊符號(hào)(逗號(hào)，冒號(hào)等)拼接成的字符串，后臺(tái)再以相應(yīng)的順序解析參數(shù)(與后臺(tái)溝通)。

html:

{{item.name}}

js:

data: {

formSend: {

code: '',

id: ''

},

dataList: [{

id: 1,

name: '中國(guó)',

code: 'china'

}]

},

三、設(shè)置默認(rèn)值

單一默認(rèn)值

如果是固定的默認(rèn)值，只需要在data中定義變量的時(shí)候設(shè)置即可，將select綁定的值設(shè)置為option的value值

{{item.name}}

data: {

formSend: {

code: 'China'

},

dataList: [{

id: 1,

name: '中國(guó)',

code: 'China'

}, {

id: 2,

name: '美國(guó)',

code: 'America'

}]

},

動(dòng)態(tài)默認(rèn)值

如果是動(dòng)態(tài)的根據(jù)某個(gè)不確定的值來設(shè)置不同的默認(rèn)值，就需要搞事情了。

需求

判斷某個(gè)日期是不是今天

1、如果是今天，需要判斷當(dāng)前時(shí)間

如果當(dāng)前時(shí)間小于14點(diǎn)，則將默認(rèn)時(shí)間設(shè)置為14點(diǎn)

同時(shí)時(shí)間數(shù)組為當(dāng)前時(shí)間后的整點(diǎn)開始到次日6點(diǎn) (小于6點(diǎn)則從6點(diǎn)開始)

如果當(dāng)前時(shí)間大于14點(diǎn)，則將默認(rèn)時(shí)間設(shè)置為當(dāng)前時(shí)間后的整點(diǎn)

同時(shí)時(shí)間數(shù)組為當(dāng)前時(shí)間后的整點(diǎn)開始到次日6點(diǎn)

2、如果不是今天

將默認(rèn)時(shí)間設(shè)置為14點(diǎn)

同時(shí)時(shí)間數(shù)組為從6點(diǎn)到次日6點(diǎn)

代碼

{{ item.timeShow }}

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'

}

}

}

重點(diǎn)在這里：

最初的時(shí)候，我把設(shè)置默認(rèn)值和設(shè)置option數(shù)組的邏輯寫在了一起，在created生命周期中調(diào)用，設(shè)置默認(rèn)值并沒有起作用。

后來將設(shè)置默認(rèn)值和設(shè)置option數(shù)組分開來寫，在created生命周期中設(shè)置option數(shù)組，在mounted生命周期中設(shè)置默認(rèn)值，此時(shí)設(shè)置默認(rèn)值才生效。

created () {

this.setTimeArr('2018-10-20')

},

mounted () {

this.setDefaultTime('2018-10-20')

},

(后期補(bǔ)充：現(xiàn)在想來，也許用this.$nextTick應(yīng)該也是可以的，只要賦值數(shù)組與賦值默認(rèn)值不同時(shí)期即可，未嘗試，此為后期補(bǔ)充文章時(shí)的想法)

四、設(shè)置清空重置無效

這種情況下通常是使用form表單的清空方法無效

{{item.name}}

方式一 select的清空重置方法

this.$refs.resetSelect.clearSingleSelect()

方式二 手動(dòng)將select的查詢條件賦值為空

this.$refs.resetSelect.query = ''

方式三 設(shè)置select的查詢?cè)~

僅在可搜索的情況下可使用

this.$refs.resetSelect.setQuery('')

五、可搜索

前端搜索

普通用法

只需添加一個(gè)filterable屬性即可，

{{item.name}}

設(shè)置搜索詞最大長(zhǎng)度

這里使用了搜索詞改變的方法，當(dāng)搜索詞改變后判斷它的長(zhǎng)度，如果大于指定的長(zhǎng)度就將它截取。重新賦值，賦值的方法兩種都可以。

有個(gè)問題是，本來我以為selectDOM是個(gè)對(duì)象，但是有時(shí)候卻為數(shù)組(在不同頁(yè)面使用)，并沒有去深究原因，只是做了判斷類型。

{{item.name}}

data: {

formSend: {

name: '',

code: ''

},

dataList: [{

id: 1,

name: '中國(guó)',

code: 'china'

}]

},

methods: {

queryChange (query) {

if (query.length > 50) {

let tempQuery = query.substring(0, 50);

this.$nextTick(() => {

// 數(shù)組

if (Array.isArray(this.$refs.querySelect)) {

// this.$refs.querySelect[0].query = tempQuery

this.$refs.querySelect[0].setQuery(tempQuery)

// 對(duì)象

}else if (typeof this.$refs.querySelect=== 'object') {

this.$refs.querySelect.query = tempQuery

// this.$refs.querySelect.setQuery(tempQuery)

}

})

}

},

}

后端搜索

用到了lodash做防抖，使用后端接口做遠(yuǎn)程搜索

import _ from 'lodash'

v-model="formUser.name"

filterable

label-in-value

remote

:remote-method="findUser"

:loading="userFinding"

@on-change="userSelect"

not-found-text=''>

{{item.name}}

data

formUser: {

name: '',

},

userFindArr: [], // 人員數(shù)組

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),

// 選擇用戶,當(dāng)綁定的值為id,顯示的值為name時(shí)。

// 當(dāng)選擇結(jié)果后，會(huì)出現(xiàn)短暫的顯示id，然后顯示name

// 解決：當(dāng)改變后用選擇的名字進(jìn)行再次搜索，此時(shí)顯示的就是名字

userSelect (obj) {

console.log('select', obj)

if (obj == null) {

return false

}

this.findUser(obj.label)

},

網(wǎng)站導(dǎo)航

總結(jié)

以上是生活随笔為你收集整理的iview select选中值取值_iView的Select选择框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。