iView的Select選擇框

目錄

在此先列出解決了那些問題，以防讀者看完了沒有用處：
1、示例，最基礎(chǔ)的使用方法
2、傳參，傳多個值的方式
3、默認(rèn)值
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) {
        // 當(dāng)下拉框的值改變后，這里可以通過改變的值向后臺發(fā)送請求獲取其他數(shù)據(jù)。
        // 可以通過函數(shù)默認(rèn)的返回值 val 獲取到下拉框選中的值
        // 也可以通過select綁定的值 this.formSend.code 獲取到下拉框選中的值
    },
}

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

1、同時獲取option綁定值和顯示值

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

解決方法

通過on-change方法來獲取選中的列表項的文本，默認(rèn)情況下，這個方法返回的是選中的綁定值，但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、傳參需要選中項的多個相關(guān)值

解決方式一

在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        
    },
}

解決方式二

只向后臺傳遞一個參數(shù)，但是這個參數(shù)包含了多個相關(guān)的值，是一個多值通過特殊符號（逗號，冒號等）拼接成的字符串，后臺再以相應(yīng)的順序解析參數(shù)（與后臺溝通）。
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'
    }]
},

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

單一默認(rèn)值

如果是固定的默認(rèn)值，只需要在data中定義變量的時候設(shè)置即可，將select綁定的值設(shè)置為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'
    }]
},

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

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

需求

判斷某個日期是不是今天
1、如果是今天，需要判斷當(dāng)前時間

如果當(dāng)前時間小于14點，則將默認(rèn)時間設(shè)置為14點
同時時間數(shù)組為當(dāng)前時間后的整點開始到次日6點 (小于6點則從6點開始)

如果當(dāng)前時間大于14點，則將默認(rèn)時間設(shè)置為當(dāng)前時間后的整點
同時時間數(shù)組為當(dāng)前時間后的整點開始到次日6點

2、如果不是今天

將默認(rèn)時間設(shè)置為14點
同時時間數(shù)組為從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'
        }
    }
}

重點在這里：
最初的時候，我把設(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è)置默認(rèn)值才生效。

created () {
    this.setTimeArr('2018-10-20')
},
mounted () {
    this.setDefaultTime('2018-10-20')
},

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

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

這種情況下通常是使用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 = ''

方式三 設(shè)置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>

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

這里使用了搜索詞改變的方法，當(dāng)搜索詞改變后判斷它的長度，如果大于指定的長度就將它截取。重新賦值，賦值的方法兩種都可以。
有個問題是，本來我以為selectDOM是個對象，但是有時候卻為數(shù)組（在不同頁面使用），并沒有去深究原因，只是做了判斷類型。

<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(() => {
        // 數(shù)組
        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做防抖，使用后端接口做遠(yuǎn)程搜索

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: [], // 人員數(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時。
// 當(dāng)選擇結(jié)果后，會出現(xiàn)短暫的顯示id，然后顯示name
// 解決：當(dāng)改變后用選擇的名字進(jìn)行再次搜索，此時顯示的就是名字
userSelect (obj) {
    console.log('select', obj)  
    if (obj == null) {
      return false
    }   
    this.findUser(obj.label)
},

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

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容