一此再、下拉框
1.1下拉框的基本用法
? ?①簡(jiǎn)單說明
? ? ? ?1.v-model---是當(dāng)前選框選中的值（即選框顯示的值）
? ? ? ? 2.v-for通過循環(huán)遍歷options，獲取下拉框中的值? :key為唯一值
? ? ? ? 3.:label的值為顯示在下拉框中的值,:value是每個(gè)數(shù)據(jù)的唯一標(biāo)識(shí)
? ? ? ? 注意：在這---v-model對(duì)應(yīng)當(dāng)前選中值的:value的值
? ?② 代碼：
? ? ? ? ?html代碼：
? ? ? script代碼：
? ??1.2下拉框的禁用
? ? ? ?①簡(jiǎn)單說明
? ? ? ? ? ? ?1.在el-option中玲销，設(shè)定disabled值為 true输拇，即可禁用該選項(xiàng)
? ? ? ? ②使用代碼：
html代碼：----在el-option中添加：disabled=“item.disabled”， item代表v-model中綁定的數(shù)據(jù)中的每一個(gè)對(duì)象痒玩，
```
? ? <el-select v-model="value" placeholder="請(qǐng)選擇">
? ? ? ? ? ? ? ?<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"? ? ? ?:disabled="item.disabled">
? ? ? ? ? ? ? ?</el-option>
? ? ? ? ? ?</el-select>
```
js代碼：------哪個(gè)選項(xiàng)想要被禁用淳附，就在此條數(shù)據(jù)中添加一個(gè)?disabled: true
```
data: {
? ? ? ? ? ? ? ? options: [{
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)1',
? ? ? ? ? ? ? ? ? ? label: '黃金糕'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)2',
? ? ? ? ? ? ? ? ? ? label: '雙皮奶',
? ? ? ? ? ? ? ? ? ? disabled: true
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)3',
? ? ? ? ? ? ? ? ? ? label: '蚵仔煎'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)4',
? ? ? ? ? ? ? ? ? ? label: '龍須面'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)5',
? ? ? ? ? ? ? ? ? ? label: '北京烤鴨'
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? value: ''
? ? ? ? ? ? }
```
③效果圖：
??1.3選擇器禁用狀態(tài)
? ? ? ?①簡(jiǎn)單說明
? ? ? ? ? ? ?為el-select設(shè)置disabled屬性，則整個(gè)選擇器不可用
? ? ? ? ②使用代碼：
html代碼：
```
<el-select v-model="value" placeholder="請(qǐng)選擇" disabled>
? ? ? ?<el-option v-for="item in options" :key="item.value" :label="item.label"? ? ?:value="item.value">
? ? ? ? </el-option>
?</el-select>
```
js代碼：
```
data: {
? ? ? ? ? ? ? ? options: [{
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)1',
? ? ? ? ? ? ? ? ? ? label: '黃金糕'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)2',
? ? ? ? ? ? ? ? ? ? label: '雙皮奶',
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)3',
? ? ? ? ? ? ? ? ? ? label: '蚵仔煎'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)4',
? ? ? ? ? ? ? ? ? ? label: '龍須面'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)5',
? ? ? ? ? ? ? ? ? ? label: '北京烤鴨'
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? value: ''
? ? ? ? ? ? }
```
效果圖：
?1.4自定義選項(xiàng)模板
①簡(jiǎn)單說明
? ? ? ? ? ? ?將自定義的 HTML 模板插入el-option的 slot 中即可蠢古。
? ②使用代碼：
html代碼：---通過在el-option的標(biāo)簽內(nèi)部自定義自己要修改的樣式奴曙，
```
<el-select v-model="value" placeholder="請(qǐng)選擇" >
? ? ? ? ? ? <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value">
? ? ? ? ? ? ? ? <span style="float: left">{{item.label}}---{{item.value}}</span>
? ? ? ? ? ? ? ? <span style="float: right">{{item.id}}</span>
? ? ? ? ? ? </el-option>
? ? ? ? </el-select>
```
js代碼：
```
data: {
? ? ? ? ? ? ? ? options: [{
? ? ? ? ? ? ? ? ? ? id:'1',
? ? ? ? ? ? ? ? ? ? value: 'cake1',
? ? ? ? ? ? ? ? ? ? label: '黃金糕'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id:'2',
? ? ? ? ? ? ? ? ? ? value: 'cake2',
? ? ? ? ? ? ? ? ? ? label: '雙皮奶',
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id:'3',
? ? ? ? ? ? ? ? ? ? value: 'cake3',
? ? ? ? ? ? ? ? ? ? label: '蚵仔煎'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id:'4',
? ? ? ? ? ? ? ? ? ? value: 'cake4',
? ? ? ? ? ? ? ? ? ? label: '龍須面'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id:'5',
? ? ? ? ? ? ? ? ? ? value: 'cake5',
? ? ? ? ? ? ? ? ? ? label: '北京烤鴨'
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? value: ''
? ? ? ? ? ? }
```
③結(jié)果展示圖：
?1.5對(duì)選項(xiàng)進(jìn)行分組
①簡(jiǎn)單說明
? ? ? ? ? 使用el-option-group對(duì)備選項(xiàng)進(jìn)行分組，它的label屬性為分組名
? ? ? ? ②使用代碼：
html代碼：---在el-select和el-option中加一層el-option-group,v-for循環(huán)data數(shù)據(jù)草讶，
```
<el-select v-model="value" placeholder="請(qǐng)選擇">
? ? ? ? ? ? <el-option-group v-for="group in options" :key="group.label" :label="group.label">
? ? ? ? ? ? ? ? <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
? ? ? ? ? ? ? ? </el-option>
? ? ? ? ? ? </el-option-group>
? ? ? ? </el-select>
```
js代碼：---data數(shù)據(jù)改變洽糟，按照每組為一個(gè)對(duì)象，對(duì)象中包括組名，此組的選項(xiàng)
```
data: {
? ? ? ? ? ? ? ? options: [{
? ? ? ? ? ? ? ? ? ? label: '熱門城市',
? ? ? ? ? ? ? ? ? ? options: [{
? ? ? ? ? ? ? ? ? ? ? ? value: 'Shanghai',
? ? ? ? ? ? ? ? ? ? ? ? label: '上海'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: 'Beijing',
? ? ? ? ? ? ? ? ? ? ? ? label: '北京'
? ? ? ? ? ? ? ? ? ? }]
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? label: '城市名',
? ? ? ? ? ? ? ? ? ? options: [{
? ? ? ? ? ? ? ? ? ? ? ? value: 'Chengdu',
? ? ? ? ? ? ? ? ? ? ? ? label: '成都'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: 'Shenzhen',
? ? ? ? ? ? ? ? ? ? ? ? label: '深圳'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: 'Guangzhou',
? ? ? ? ? ? ? ? ? ? ? ? label: '廣州'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: 'Dalian',
? ? ? ? ? ? ? ? ? ? ? ? label: '大連'
? ? ? ? ? ? ? ? ? ? }]
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? value: ''
? ? ? ? ? ? }
```
③效果展示：
?1.6可搜索
①簡(jiǎn)單說明
? ? ? ? ?為el-select添加filterable屬性即可啟用搜索功能坤溃。
②實(shí)現(xiàn)原理
默認(rèn)情況下拍霜，Select 會(huì)找出所有l(wèi)abel屬性包含輸入值的選項(xiàng)。如果希望使用其他的搜索邏輯薪介，可以通過傳入一個(gè)filter-method來實(shí)現(xiàn)祠饺。filter-method為一個(gè)Function，它會(huì)在輸入值發(fā)生變化時(shí)調(diào)用汁政，參數(shù)為當(dāng)前輸入值道偷。
? ? ? ? ②使用代碼：
html代碼：---在el-select和el-option中加一層el-option-group,v-for循環(huán)data數(shù)據(jù)，
```
<el-select v-model="value" filterable placeholder="請(qǐng)選擇">
? ? ? ? ? ? <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
? ? ? ? ? ? </el-option>
</el-select>
```
js代碼：
```
data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? options: [{
? ? ? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)1',
? ? ? ? ? ? ? ? ? ? ? ? label: '黃金糕'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)2',
? ? ? ? ? ? ? ? ? ? ? ? label: '雙皮奶'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)3',
? ? ? ? ? ? ? ? ? ? ? ? label: '蚵仔煎'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)4',
? ? ? ? ? ? ? ? ? ? ? ? label: '龍須面'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: '選項(xiàng)5',
? ? ? ? ? ? ? ? ? ? ? ? label: '北京烤鴨'
? ? ? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? ? ? value: ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
```
運(yùn)行結(jié)果：--搜索的實(shí)現(xiàn)是根據(jù)輸入框中的文字记劈，實(shí)時(shí)進(jìn)行搜索
