一、下拉框
1.1下拉框的基本用法
? ?①簡單說明
? ? ? ?1.v-model---是當(dāng)前選框選中的值（即選框顯示的值）
? ? ? ? 2.v-for通過循環(huán)遍歷options，獲取下拉框中的值? :key為唯一值
? ? ? ? 3.:label的值為顯示在下拉框中的值,:value是每個數(shù)據(jù)的唯一標識
? ? ? ? 注意：在這---v-model對應(yīng)當(dāng)前選中值的:value的值
? ?② 代碼：
? ? ? ? ?html代碼：
? ? ? script代碼：
? ??1.2下拉框的禁用
? ? ? ?①簡單說明
? ? ? ? ? ? ?1.在el-option中，設(shè)定disabled值為 true，即可禁用該選項
? ? ? ? ②使用代碼：
html代碼：----在el-option中添加：disabled=“item.disabled”， item代表v-model中綁定的數(shù)據(jù)中的每一個對象，
```
? ? <el-select v-model="value" placeholder="請選擇">
? ? ? ? ? ? ? ?<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"? ? ? ?:disabled="item.disabled">
? ? ? ? ? ? ? ?</el-option>
? ? ? ? ? ?</el-select>
```
js代碼：------哪個選項想要被禁用，就在此條數(shù)據(jù)中添加一個?disabled: true
```
data: {
? ? ? ? ? ? ? ? options: [{
? ? ? ? ? ? ? ? ? ? value: '選項1',
? ? ? ? ? ? ? ? ? ? label: '黃金糕'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項2',
? ? ? ? ? ? ? ? ? ? label: '雙皮奶',
? ? ? ? ? ? ? ? ? ? disabled: true
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項3',
? ? ? ? ? ? ? ? ? ? label: '蚵仔煎'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項4',
? ? ? ? ? ? ? ? ? ? label: '龍須面'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項5',
? ? ? ? ? ? ? ? ? ? label: '北京烤鴨'
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? value: ''
? ? ? ? ? ? }
```
③效果圖：
??1.3選擇器禁用狀態(tài)
? ? ? ?①簡單說明
? ? ? ? ? ? ?為el-select設(shè)置disabled屬性，則整個選擇器不可用
? ? ? ? ②使用代碼：
html代碼：
```
<el-select v-model="value" placeholder="請選擇" 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: '選項1',
? ? ? ? ? ? ? ? ? ? label: '黃金糕'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項2',
? ? ? ? ? ? ? ? ? ? label: '雙皮奶',
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項3',
? ? ? ? ? ? ? ? ? ? label: '蚵仔煎'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項4',
? ? ? ? ? ? ? ? ? ? label: '龍須面'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? value: '選項5',
? ? ? ? ? ? ? ? ? ? label: '北京烤鴨'
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? value: ''
? ? ? ? ? ? }
```
效果圖：
?1.4自定義選項模板
①簡單說明
? ? ? ? ? ? ?將自定義的 HTML 模板插入el-option的 slot 中即可。
? ②使用代碼：
html代碼：---通過在el-option的標簽內(nèi)部自定義自己要修改的樣式，
```
<el-select v-model="value" placeholder="請選擇" >
? ? ? ? ? ? <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對選項進行分組
①簡單說明
? ? ? ? ? 使用el-option-group對備選項進行分組，它的label屬性為分組名
? ? ? ? ②使用代碼：
html代碼：---在el-select和el-option中加一層el-option-group,v-for循環(huán)data數(shù)據(jù)，
```
<el-select v-model="value" placeholder="請選擇">
? ? ? ? ? ? <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ù)改變，按照每組為一個對象，對象中包括組名，此組的選項
```
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可搜索
①簡單說明
? ? ? ? ?為el-select添加filterable屬性即可啟用搜索功能。
②實現(xiàn)原理
默認情況下，Select 會找出所有l(wèi)abel屬性包含輸入值的選項。如果希望使用其他的搜索邏輯，可以通過傳入一個filter-method來實現(xiàn)。filter-method為一個Function，它會在輸入值發(fā)生變化時調(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="請選擇">
? ? ? ? ? ? <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: '選項1',
? ? ? ? ? ? ? ? ? ? ? ? label: '黃金糕'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: '選項2',
? ? ? ? ? ? ? ? ? ? ? ? label: '雙皮奶'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: '選項3',
? ? ? ? ? ? ? ? ? ? ? ? label: '蚵仔煎'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: '選項4',
? ? ? ? ? ? ? ? ? ? ? ? label: '龍須面'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? value: '選項5',
? ? ? ? ? ? ? ? ? ? ? ? label: '北京烤鴨'
? ? ? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? ? ? value: ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
```
運行結(jié)果：--搜索的實現(xiàn)是根據(jù)輸入框中的文字，實時進行搜索
