Cascader 級聯選擇器

本文轉載自查看原文 2018-03-13 05:09 18517 Form組件

當一個數據集合有清晰的層級結構時，可通過級聯選擇器逐級查看並選擇。

基礎用法

有兩種觸發子菜單的方式

只需為 Cascader 的options屬性指定選項數組即可渲染出一個級聯選擇器。

通過expand-trigger可以定義展開子級菜單的觸發方式。

本例還展示了change事件，它的參數為 Cascader 的綁定值：一個由各級菜單的值所組成的數組。

<div class="block">
  <span class="demonstration">默認 click 觸發子菜單</span>
  <el-cascader
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</div>
<div class="block">
  <span class="demonstration">hover 觸發子菜單</span>
  <el-cascader
    expand-trigger="hover"
    :options="options"
    v-model="selectedOptions2"
    @change="handleChange">
  </el-cascader>
</div>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '設計原則',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反饋'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '導航',
            children: [{
              value: 'cexiangdaohang',
              label: '側向導航'
            }, {
              value: 'dingbudaohang',
              label: '頂部導航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '組件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字體'
            }, {
              value: 'icon',
              label: 'Icon 圖標'
            }, {
              value: 'button',
              label: 'Button 按鈕'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 單選框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多選框'
            }, {
              value: 'input',
              label: 'Input 輸入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 計數器'
            }, {
              value: 'select',
              label: 'Select 選擇器'
            }, {
              value: 'cascader',
              label: 'Cascader 級聯選擇器'
            }, {
              value: 'switch',
              label: 'Switch 開關'
            }, {
              value: 'slider',
              label: 'Slider 滑塊'
            }, {
              value: 'time-picker',
              label: 'TimePicker 時間選擇器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期選擇器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期時間選擇器'
            }, {
              value: 'upload',
              label: 'Upload 上傳'
            }, {
              value: 'rate',
              label: 'Rate 評分'
            }, {
              value: 'form',
              label: 'Form 表單'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 標簽'
            }, {
              value: 'progress',
              label: 'Progress 進度條'
            }, {
              value: 'tree',
              label: 'Tree 樹形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分頁'
            }, {
              value: 'badge',
              label: 'Badge 標記'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加載'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 彈框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 導航菜單'
            }, {
              value: 'tabs',
              label: 'Tabs 標簽頁'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜單'
            }, {
              value: 'steps',
              label: 'Steps 步驟條'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 對話框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 彈出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走馬燈'
            }, {
              value: 'collapse',
              label: 'Collapse 折疊面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '資源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '組件交互文檔'
          }]
        }],
        selectedOptions: [],
        selectedOptions2: []
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

禁用選項

通過在數據源中設置 disabled 字段來聲明該選項是禁用的

本例中，options指定的數組中的第一個元素含有disabled: true鍵值對，因此是禁用的。在默認情況下，Cascader 會檢查數據中每一項的disabled字段是否為true，如果你的數據中表示禁用含義的字段名不為disabled，可以通過props屬性來指定（詳見下方 API 表格）。當然，value、label和children這三個字段名也可以通過同樣的方式指定。

  1 <el-cascader
  2   :options="optionsWithDisabled"
  3 ></el-cascader>
  4 <script>
  5   export default {
  6     data() {
  7       return {
  8         optionsWithDisabled: [{
  9           value: 'zhinan',
 10           label: '指南',
 11           disabled: true,
 12           children: [{
 13             value: 'shejiyuanze',
 14             label: '設計原則',
 15             children: [{
 16               value: 'yizhi',
 17               label: '一致'
 18             }, {
 19               value: 'fankui',
 20               label: '反饋'
 21             }, {
 22               value: 'xiaolv',
 23               label: '效率'
 24             }, {
 25               value: 'kekong',
 26               label: '可控'
 27             }]
 28           }, {
 29             value: 'daohang',
 30             label: '導航',
 31             children: [{
 32               value: 'cexiangdaohang',
 33               label: '側向導航'
 34             }, {
 35               value: 'dingbudaohang',
 36               label: '頂部導航'
 37             }]
 38           }]
 39         }, {
 40           value: 'zujian',
 41           label: '組件',
 42           children: [{
 43             value: 'basic',
 44             label: 'Basic',
 45             children: [{
 46               value: 'layout',
 47               label: 'Layout 布局'
 48             }, {
 49               value: 'color',
 50               label: 'Color 色彩'
 51             }, {
 52               value: 'typography',
 53               label: 'Typography 字體'
 54             }, {
 55               value: 'icon',
 56               label: 'Icon 圖標'
 57             }, {
 58               value: 'button',
 59               label: 'Button 按鈕'
 60             }]
 61           }, {
 62             value: 'form',
 63             label: 'Form',
 64             children: [{
 65               value: 'radio',
 66               label: 'Radio 單選框'
 67             }, {
 68               value: 'checkbox',
 69               label: 'Checkbox 多選框'
 70             }, {
 71               value: 'input',
 72               label: 'Input 輸入框'
 73             }, {
 74               value: 'input-number',
 75               label: 'InputNumber 計數器'
 76             }, {
 77               value: 'select',
 78               label: 'Select 選擇器'
 79             }, {
 80               value: 'cascader',
 81               label: 'Cascader 級聯選擇器'
 82             }, {
 83               value: 'switch',
 84               label: 'Switch 開關'
 85             }, {
 86               value: 'slider',
 87               label: 'Slider 滑塊'
 88             }, {
 89               value: 'time-picker',
 90               label: 'TimePicker 時間選擇器'
 91             }, {
 92               value: 'date-picker',
 93               label: 'DatePicker 日期選擇器'
 94             }, {
 95               value: 'datetime-picker',
 96               label: 'DateTimePicker 日期時間選擇器'
 97             }, {
 98               value: 'upload',
 99               label: 'Upload 上傳'
100             }, {
101               value: 'rate',
102               label: 'Rate 評分'
103             }, {
104               value: 'form',
105               label: 'Form 表單'
106             }]
107           }, {
108             value: 'data',
109             label: 'Data',
110             children: [{
111               value: 'table',
112               label: 'Table 表格'
113             }, {
114               value: 'tag',
115               label: 'Tag 標簽'
116             }, {
117               value: 'progress',
118               label: 'Progress 進度條'
119             }, {
120               value: 'tree',
121               label: 'Tree 樹形控件'
122             }, {
123               value: 'pagination',
124               label: 'Pagination 分頁'
125             }, {
126               value: 'badge',
127               label: 'Badge 標記'
128             }]
129           }, {
130             value: 'notice',
131             label: 'Notice',
132             children: [{
133               value: 'alert',
134               label: 'Alert 警告'
135             }, {
136               value: 'loading',
137               label: 'Loading 加載'
138             }, {
139               value: 'message',
140               label: 'Message 消息提示'
141             }, {
142               value: 'message-box',
143               label: 'MessageBox 彈框'
144             }, {
145               value: 'notification',
146               label: 'Notification 通知'
147             }]
148           }, {
149             value: 'navigation',
150             label: 'Navigation',
151             children: [{
152               value: 'menu',
153               label: 'NavMenu 導航菜單'
154             }, {
155               value: 'tabs',
156               label: 'Tabs 標簽頁'
157             }, {
158               value: 'breadcrumb',
159               label: 'Breadcrumb 面包屑'
160             }, {
161               value: 'dropdown',
162               label: 'Dropdown 下拉菜單'
163             }, {
164               value: 'steps',
165               label: 'Steps 步驟條'
166             }]
167           }, {
168             value: 'others',
169             label: 'Others',
170             children: [{
171               value: 'dialog',
172               label: 'Dialog 對話框'
173             }, {
174               value: 'tooltip',
175               label: 'Tooltip 文字提示'
176             }, {
177               value: 'popover',
178               label: 'Popover 彈出框'
179             }, {
180               value: 'card',
181               label: 'Card 卡片'
182             }, {
183               value: 'carousel',
184               label: 'Carousel 走馬燈'
185             }, {
186               value: 'collapse',
187               label: 'Collapse 折疊面板'
188             }]
189           }]
190         }, {
191           value: 'ziyuan',
192           label: '資源',
193           children: [{
194             value: 'axure',
195             label: 'Axure Components'
196           }, {
197             value: 'sketch',
198             label: 'Sketch Templates'
199           }, {
200             value: 'jiaohu',
201             label: '組件交互文檔'
202           }]
203         }]
204       };
205     }
206   };
207 </script>

View Code

僅顯示最后一級

可以僅在輸入框中顯示選中項最后一級的標簽，而不是選中項所在的完整路徑。

屬性show-all-levels定義了是否顯示完整的路徑，將其賦值為false則僅顯示最后一級

  1 <el-cascader
  2   :options="options"
  3   :show-all-levels="false"
  4 ></el-cascader>
  5 <script>
  6   export default {
  7     data() {
  8       return {
  9         options: [{
 10           value: 'zhinan',
 11           label: '指南',
 12           children: [{
 13             value: 'shejiyuanze',
 14             label: '設計原則',
 15             children: [{
 16               value: 'yizhi',
 17               label: '一致'
 18             }, {
 19               value: 'fankui',
 20               label: '反饋'
 21             }, {
 22               value: 'xiaolv',
 23               label: '效率'
 24             }, {
 25               value: 'kekong',
 26               label: '可控'
 27             }]
 28           }, {
 29             value: 'daohang',
 30             label: '導航',
 31             children: [{
 32               value: 'cexiangdaohang',
 33               label: '側向導航'
 34             }, {
 35               value: 'dingbudaohang',
 36               label: '頂部導航'
 37             }]
 38           }]
 39         }, {
 40           value: 'zujian',
 41           label: '組件',
 42           children: [{
 43             value: 'basic',
 44             label: 'Basic',
 45             children: [{
 46               value: 'layout',
 47               label: 'Layout 布局'
 48             }, {
 49               value: 'color',
 50               label: 'Color 色彩'
 51             }, {
 52               value: 'typography',
 53               label: 'Typography 字體'
 54             }, {
 55               value: 'icon',
 56               label: 'Icon 圖標'
 57             }, {
 58               value: 'button',
 59               label: 'Button 按鈕'
 60             }]
 61           }, {
 62             value: 'form',
 63             label: 'Form',
 64             children: [{
 65               value: 'radio',
 66               label: 'Radio 單選框'
 67             }, {
 68               value: 'checkbox',
 69               label: 'Checkbox 多選框'
 70             }, {
 71               value: 'input',
 72               label: 'Input 輸入框'
 73             }, {
 74               value: 'input-number',
 75               label: 'InputNumber 計數器'
 76             }, {
 77               value: 'select',
 78               label: 'Select 選擇器'
 79             }, {
 80               value: 'cascader',
 81               label: 'Cascader 級聯選擇器'
 82             }, {
 83               value: 'switch',
 84               label: 'Switch 開關'
 85             }, {
 86               value: 'slider',
 87               label: 'Slider 滑塊'
 88             }, {
 89               value: 'time-picker',
 90               label: 'TimePicker 時間選擇器'
 91             }, {
 92               value: 'date-picker',
 93               label: 'DatePicker 日期選擇器'
 94             }, {
 95               value: 'datetime-picker',
 96               label: 'DateTimePicker 日期時間選擇器'
 97             }, {
 98               value: 'upload',
 99               label: 'Upload 上傳'
100             }, {
101               value: 'rate',
102               label: 'Rate 評分'
103             }, {
104               value: 'form',
105               label: 'Form 表單'
106             }]
107           }, {
108             value: 'data',
109             label: 'Data',
110             children: [{
111               value: 'table',
112               label: 'Table 表格'
113             }, {
114               value: 'tag',
115               label: 'Tag 標簽'
116             }, {
117               value: 'progress',
118               label: 'Progress 進度條'
119             }, {
120               value: 'tree',
121               label: 'Tree 樹形控件'
122             }, {
123               value: 'pagination',
124               label: 'Pagination 分頁'
125             }, {
126               value: 'badge',
127               label: 'Badge 標記'
128             }]
129           }, {
130             value: 'notice',
131             label: 'Notice',
132             children: [{
133               value: 'alert',
134               label: 'Alert 警告'
135             }, {
136               value: 'loading',
137               label: 'Loading 加載'
138             }, {
139               value: 'message',
140               label: 'Message 消息提示'
141             }, {
142               value: 'message-box',
143               label: 'MessageBox 彈框'
144             }, {
145               value: 'notification',
146               label: 'Notification 通知'
147             }]
148           }, {
149             value: 'navigation',
150             label: 'Navigation',
151             children: [{
152               value: 'menu',
153               label: 'NavMenu 導航菜單'
154             }, {
155               value: 'tabs',
156               label: 'Tabs 標簽頁'
157             }, {
158               value: 'breadcrumb',
159               label: 'Breadcrumb 面包屑'
160             }, {
161               value: 'dropdown',
162               label: 'Dropdown 下拉菜單'
163             }, {
164               value: 'steps',
165               label: 'Steps 步驟條'
166             }]
167           }, {
168             value: 'others',
169             label: 'Others',
170             children: [{
171               value: 'dialog',
172               label: 'Dialog 對話框'
173             }, {
174               value: 'tooltip',
175               label: 'Tooltip 文字提示'
176             }, {
177               value: 'popover',
178               label: 'Popover 彈出框'
179             }, {
180               value: 'card',
181               label: 'Card 卡片'
182             }, {
183               value: 'carousel',
184               label: 'Carousel 走馬燈'
185             }, {
186               value: 'collapse',
187               label: 'Collapse 折疊面板'
188             }]
189           }]
190         }, {
191           value: 'ziyuan',
192           label: '資源',
193           children: [{
194             value: 'axure',
195             label: 'Axure Components'
196           }, {
197             value: 'sketch',
198             label: 'Sketch Templates'
199           }, {
200             value: 'jiaohu',
201             label: '組件交互文檔'
202           }]
203         }]
204       };
205     }
206   };
207 </script>

View Code

默認值

默認值通過數組的方式指定。

  1 <el-cascader
  2   :options="options"
  3   v-model="selectedOptions3"
  4 ></el-cascader>
  5 <script>
  6   export default {
  7     data() {
  8       return {
  9         options: [{
 10           value: 'zhinan',
 11           label: '指南',
 12           children: [{
 13             value: 'shejiyuanze',
 14             label: '設計原則',
 15             children: [{
 16               value: 'yizhi',
 17               label: '一致'
 18             }, {
 19               value: 'fankui',
 20               label: '反饋'
 21             }, {
 22               value: 'xiaolv',
 23               label: '效率'
 24             }, {
 25               value: 'kekong',
 26               label: '可控'
 27             }]
 28           }, {
 29             value: 'daohang',
 30             label: '導航',
 31             children: [{
 32               value: 'cexiangdaohang',
 33               label: '側向導航'
 34             }, {
 35               value: 'dingbudaohang',
 36               label: '頂部導航'
 37             }]
 38           }]
 39         }, {
 40           value: 'zujian',
 41           label: '組件',
 42           children: [{
 43             value: 'basic',
 44             label: 'Basic',
 45             children: [{
 46               value: 'layout',
 47               label: 'Layout 布局'
 48             }, {
 49               value: 'color',
 50               label: 'Color 色彩'
 51             }, {
 52               value: 'typography',
 53               label: 'Typography 字體'
 54             }, {
 55               value: 'icon',
 56               label: 'Icon 圖標'
 57             }, {
 58               value: 'button',
 59               label: 'Button 按鈕'
 60             }]
 61           }, {
 62             value: 'form',
 63             label: 'Form',
 64             children: [{
 65               value: 'radio',
 66               label: 'Radio 單選框'
 67             }, {
 68               value: 'checkbox',
 69               label: 'Checkbox 多選框'
 70             }, {
 71               value: 'input',
 72               label: 'Input 輸入框'
 73             }, {
 74               value: 'input-number',
 75               label: 'InputNumber 計數器'
 76             }, {
 77               value: 'select',
 78               label: 'Select 選擇器'
 79             }, {
 80               value: 'cascader',
 81               label: 'Cascader 級聯選擇器'
 82             }, {
 83               value: 'switch',
 84               label: 'Switch 開關'
 85             }, {
 86               value: 'slider',
 87               label: 'Slider 滑塊'
 88             }, {
 89               value: 'time-picker',
 90               label: 'TimePicker 時間選擇器'
 91             }, {
 92               value: 'date-picker',
 93               label: 'DatePicker 日期選擇器'
 94             }, {
 95               value: 'datetime-picker',
 96               label: 'DateTimePicker 日期時間選擇器'
 97             }, {
 98               value: 'upload',
 99               label: 'Upload 上傳'
100             }, {
101               value: 'rate',
102               label: 'Rate 評分'
103             }, {
104               value: 'form',
105               label: 'Form 表單'
106             }]
107           }, {
108             value: 'data',
109             label: 'Data',
110             children: [{
111               value: 'table',
112               label: 'Table 表格'
113             }, {
114               value: 'tag',
115               label: 'Tag 標簽'
116             }, {
117               value: 'progress',
118               label: 'Progress 進度條'
119             }, {
120               value: 'tree',
121               label: 'Tree 樹形控件'
122             }, {
123               value: 'pagination',
124               label: 'Pagination 分頁'
125             }, {
126               value: 'badge',
127               label: 'Badge 標記'
128             }]
129           }, {
130             value: 'notice',
131             label: 'Notice',
132             children: [{
133               value: 'alert',
134               label: 'Alert 警告'
135             }, {
136               value: 'loading',
137               label: 'Loading 加載'
138             }, {
139               value: 'message',
140               label: 'Message 消息提示'
141             }, {
142               value: 'message-box',
143               label: 'MessageBox 彈框'
144             }, {
145               value: 'notification',
146               label: 'Notification 通知'
147             }]
148           }, {
149             value: 'navigation',
150             label: 'Navigation',
151             children: [{
152               value: 'menu',
153               label: 'NavMenu 導航菜單'
154             }, {
155               value: 'tabs',
156               label: 'Tabs 標簽頁'
157             }, {
158               value: 'breadcrumb',
159               label: 'Breadcrumb 面包屑'
160             }, {
161               value: 'dropdown',
162               label: 'Dropdown 下拉菜單'
163             }, {
164               value: 'steps',
165               label: 'Steps 步驟條'
166             }]
167           }, {
168             value: 'others',
169             label: 'Others',
170             children: [{
171               value: 'dialog',
172               label: 'Dialog 對話框'
173             }, {
174               value: 'tooltip',
175               label: 'Tooltip 文字提示'
176             }, {
177               value: 'popover',
178               label: 'Popover 彈出框'
179             }, {
180               value: 'card',
181               label: 'Card 卡片'
182             }, {
183               value: 'carousel',
184               label: 'Carousel 走馬燈'
185             }, {
186               value: 'collapse',
187               label: 'Collapse 折疊面板'
188             }]
189           }]
190         }, {
191           value: 'ziyuan',
192           label: '資源',
193           children: [{
194             value: 'axure',
195             label: 'Axure Components'
196           }, {
197             value: 'sketch',
198             label: 'Sketch Templates'
199           }, {
200             value: 'jiaohu',
201             label: '組件交互文檔'
202           }]
203         }],
204         selectedOptions3: ['zujian', 'data', 'tag']
205       };
206     }
207   };
208 </script>

View Code

選擇即改變

點擊或移入選項即表示選中該項，可用於選擇任意一級菜單的選項。

若需要允許用戶選擇任意一級選項，則可將change-on-select賦值為true

  1 <el-cascader
  2   :options="options"
  3   change-on-select
  4 ></el-cascader>
  5 <script>
  6   export default {
  7     data() {
  8       return {
  9         options: [{
 10           value: 'zhinan',
 11           label: '指南',
 12           children: [{
 13             value: 'shejiyuanze',
 14             label: '設計原則',
 15             children: [{
 16               value: 'yizhi',
 17               label: '一致'
 18             }, {
 19               value: 'fankui',
 20               label: '反饋'
 21             }, {
 22               value: 'xiaolv',
 23               label: '效率'
 24             }, {
 25               value: 'kekong',
 26               label: '可控'
 27             }]
 28           }, {
 29             value: 'daohang',
 30             label: '導航',
 31             children: [{
 32               value: 'cexiangdaohang',
 33               label: '側向導航'
 34             }, {
 35               value: 'dingbudaohang',
 36               label: '頂部導航'
 37             }]
 38           }]
 39         }, {
 40           value: 'zujian',
 41           label: '組件',
 42           children: [{
 43             value: 'basic',
 44             label: 'Basic',
 45             children: [{
 46               value: 'layout',
 47               label: 'Layout 布局'
 48             }, {
 49               value: 'color',
 50               label: 'Color 色彩'
 51             }, {
 52               value: 'typography',
 53               label: 'Typography 字體'
 54             }, {
 55               value: 'icon',
 56               label: 'Icon 圖標'
 57             }, {
 58               value: 'button',
 59               label: 'Button 按鈕'
 60             }]
 61           }, {
 62             value: 'form',
 63             label: 'Form',
 64             children: [{
 65               value: 'radio',
 66               label: 'Radio 單選框'
 67             }, {
 68               value: 'checkbox',
 69               label: 'Checkbox 多選框'
 70             }, {
 71               value: 'input',
 72               label: 'Input 輸入框'
 73             }, {
 74               value: 'input-number',
 75               label: 'InputNumber 計數器'
 76             }, {
 77               value: 'select',
 78               label: 'Select 選擇器'
 79             }, {
 80               value: 'cascader',
 81               label: 'Cascader 級聯選擇器'
 82             }, {
 83               value: 'switch',
 84               label: 'Switch 開關'
 85             }, {
 86               value: 'slider',
 87               label: 'Slider 滑塊'
 88             }, {
 89               value: 'time-picker',
 90               label: 'TimePicker 時間選擇器'
 91             }, {
 92               value: 'date-picker',
 93               label: 'DatePicker 日期選擇器'
 94             }, {
 95               value: 'datetime-picker',
 96               label: 'DateTimePicker 日期時間選擇器'
 97             }, {
 98               value: 'upload',
 99               label: 'Upload 上傳'
100             }, {
101               value: 'rate',
102               label: 'Rate 評分'
103             }, {
104               value: 'form',
105               label: 'Form 表單'
106             }]
107           }, {
108             value: 'data',
109             label: 'Data',
110             children: [{
111               value: 'table',
112               label: 'Table 表格'
113             }, {
114               value: 'tag',
115               label: 'Tag 標簽'
116             }, {
117               value: 'progress',
118               label: 'Progress 進度條'
119             }, {
120               value: 'tree',
121               label: 'Tree 樹形控件'
122             }, {
123               value: 'pagination',
124               label: 'Pagination 分頁'
125             }, {
126               value: 'badge',
127               label: 'Badge 標記'
128             }]
129           }, {
130             value: 'notice',
131             label: 'Notice',
132             children: [{
133               value: 'alert',
134               label: 'Alert 警告'
135             }, {
136               value: 'loading',
137               label: 'Loading 加載'
138             }, {
139               value: 'message',
140               label: 'Message 消息提示'
141             }, {
142               value: 'message-box',
143               label: 'MessageBox 彈框'
144             }, {
145               value: 'notification',
146               label: 'Notification 通知'
147             }]
148           }, {
149             value: 'navigation',
150             label: 'Navigation',
151             children: [{
152               value: 'menu',
153               label: 'NavMenu 導航菜單'
154             }, {
155               value: 'tabs',
156               label: 'Tabs 標簽頁'
157             }, {
158               value: 'breadcrumb',
159               label: 'Breadcrumb 面包屑'
160             }, {
161               value: 'dropdown',
162               label: 'Dropdown 下拉菜單'
163             }, {
164               value: 'steps',
165               label: 'Steps 步驟條'
166             }]
167           }, {
168             value: 'others',
169             label: 'Others',
170             children: [{
171               value: 'dialog',
172               label: 'Dialog 對話框'
173             }, {
174               value: 'tooltip',
175               label: 'Tooltip 文字提示'
176             }, {
177               value: 'popover',
178               label: 'Popover 彈出框'
179             }, {
180               value: 'card',
181               label: 'Card 卡片'
182             }, {
183               value: 'carousel',
184               label: 'Carousel 走馬燈'
185             }, {
186               value: 'collapse',
187               label: 'Collapse 折疊面板'
188             }]
189           }]
190         }, {
191           value: 'ziyuan',
192           label: '資源',
193           children: [{
194             value: 'axure',
195             label: 'Axure Components'
196           }, {
197             value: 'sketch',
198             label: 'Sketch Templates'
199           }, {
200             value: 'jiaohu',
201             label: '組件交互文檔'
202           }]
203         }]
204       };
205     }
206   };
207 </script>

View Code

動態加載次級選項

當選中某一級時，動態加載該級下的選項。

本例的選項數據源在初始化時不包含城市數據。利用active-item-change事件，可以在用戶點擊某個省份時拉取該省份下的城市數據。此外，本例還展示了props屬性的用法。

<el-cascader
  :options="options2"
  @active-item-change="handleItemChange"
  :props="props"
></el-cascader>

<script>
  export default {
    data() {
      return {
        options2: [{
          label: '江蘇',
          cities: []
        }, {
          label: '浙江',
          cities: []
        }],
        props: {
          value: 'label',
          children: 'cities'
        }
      };
    },

    methods: {
      handleItemChange(val) {
        console.log('active item:', val);
        setTimeout(_ => {
          if (val.indexOf('江蘇') > -1 && !this.options2[0].cities.length) {
            this.options2[0].cities = [{
              label: '南京'
            }];
          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {
            this.options2[1].cities = [{
              label: '杭州'
            }];
          }
        }, 300);
      }
    }
  };
</script>

可搜索

可以快捷地搜索選項並選擇。

將filterable賦值為true即可打開搜索功能。

  1 <div class="block">
  2   <span class="demonstration">只可選擇最后一級菜單的選項</span>
  3   <el-cascader
  4     placeholder="試試搜索：指南"
  5     :options="options"
  6     filterable
  7   ></el-cascader>
  8 </div>
  9 <div class="block">
 10   <span class="demonstration">可選擇任意一級菜單的選項</span>
 11   <el-cascader
 12     placeholder="試試搜索：指南"
 13     :options="options"
 14     filterable
 15     change-on-select
 16   ></el-cascader>
 17 </div>
 18 
 19 <script>
 20   export default {
 21     data() {
 22       return {
 23         options: [{
 24           value: 'zhinan',
 25           label: '指南',
 26           children: [{
 27             value: 'shejiyuanze',
 28             label: '設計原則',
 29             children: [{
 30               value: 'yizhi',
 31               label: '一致'
 32             }, {
 33               value: 'fankui',
 34               label: '反饋'
 35             }, {
 36               value: 'xiaolv',
 37               label: '效率'
 38             }, {
 39               value: 'kekong',
 40               label: '可控'
 41             }]
 42           }, {
 43             value: 'daohang',
 44             label: '導航',
 45             children: [{
 46               value: 'cexiangdaohang',
 47               label: '側向導航'
 48             }, {
 49               value: 'dingbudaohang',
 50               label: '頂部導航'
 51             }]
 52           }]
 53         }, {
 54           value: 'zujian',
 55           label: '組件',
 56           children: [{
 57             value: 'basic',
 58             label: 'Basic',
 59             children: [{
 60               value: 'layout',
 61               label: 'Layout 布局'
 62             }, {
 63               value: 'color',
 64               label: 'Color 色彩'
 65             }, {
 66               value: 'typography',
 67               label: 'Typography 字體'
 68             }, {
 69               value: 'icon',
 70               label: 'Icon 圖標'
 71             }, {
 72               value: 'button',
 73               label: 'Button 按鈕'
 74             }]
 75           }, {
 76             value: 'form',
 77             label: 'Form',
 78             children: [{
 79               value: 'radio',
 80               label: 'Radio 單選框'
 81             }, {
 82               value: 'checkbox',
 83               label: 'Checkbox 多選框'
 84             }, {
 85               value: 'input',
 86               label: 'Input 輸入框'
 87             }, {
 88               value: 'input-number',
 89               label: 'InputNumber 計數器'
 90             }, {
 91               value: 'select',
 92               label: 'Select 選擇器'
 93             }, {
 94               value: 'cascader',
 95               label: 'Cascader 級聯選擇器'
 96             }, {
 97               value: 'switch',
 98               label: 'Switch 開關'
 99             }, {
100               value: 'slider',
101               label: 'Slider 滑塊'
102             }, {
103               value: 'time-picker',
104               label: 'TimePicker 時間選擇器'
105             }, {
106               value: 'date-picker',
107               label: 'DatePicker 日期選擇器'
108             }, {
109               value: 'datetime-picker',
110               label: 'DateTimePicker 日期時間選擇器'
111             }, {
112               value: 'upload',
113               label: 'Upload 上傳'
114             }, {
115               value: 'rate',
116               label: 'Rate 評分'
117             }, {
118               value: 'form',
119               label: 'Form 表單'
120             }]
121           }, {
122             value: 'data',
123             label: 'Data',
124             children: [{
125               value: 'table',
126               label: 'Table 表格'
127             }, {
128               value: 'tag',
129               label: 'Tag 標簽'
130             }, {
131               value: 'progress',
132               label: 'Progress 進度條'
133             }, {
134               value: 'tree',
135               label: 'Tree 樹形控件'
136             }, {
137               value: 'pagination',
138               label: 'Pagination 分頁'
139             }, {
140               value: 'badge',
141               label: 'Badge 標記'
142             }]
143           }, {
144             value: 'notice',
145             label: 'Notice',
146             children: [{
147               value: 'alert',
148               label: 'Alert 警告'
149             }, {
150               value: 'loading',
151               label: 'Loading 加載'
152             }, {
153               value: 'message',
154               label: 'Message 消息提示'
155             }, {
156               value: 'message-box',
157               label: 'MessageBox 彈框'
158             }, {
159               value: 'notification',
160               label: 'Notification 通知'
161             }]
162           }, {
163             value: 'navigation',
164             label: 'Navigation',
165             children: [{
166               value: 'menu',
167               label: 'NavMenu 導航菜單'
168             }, {
169               value: 'tabs',
170               label: 'Tabs 標簽頁'
171             }, {
172               value: 'breadcrumb',
173               label: 'Breadcrumb 面包屑'
174             }, {
175               value: 'dropdown',
176               label: 'Dropdown 下拉菜單'
177             }, {
178               value: 'steps',
179               label: 'Steps 步驟條'
180             }]
181           }, {
182             value: 'others',
183             label: 'Others',
184             children: [{
185               value: 'dialog',
186               label: 'Dialog 對話框'
187             }, {
188               value: 'tooltip',
189               label: 'Tooltip 文字提示'
190             }, {
191               value: 'popover',
192               label: 'Popover 彈出框'
193             }, {
194               value: 'card',
195               label: 'Card 卡片'
196             }, {
197               value: 'carousel',
198               label: 'Carousel 走馬燈'
199             }, {
200               value: 'collapse',
201               label: 'Collapse 折疊面板'
202             }]
203           }]
204         }, {
205           value: 'ziyuan',
206           label: '資源',
207           children: [{
208             value: 'axure',
209             label: 'Axure Components'
210           }, {
211             value: 'sketch',
212             label: 'Sketch Templates'
213           }, {
214             value: 'jiaohu',
215             label: '組件交互文檔'
216           }]
217         }]
218       };
219     }
220   };
221 </script>

View Code

Attributes

參數	說明	類型	可選值	默認值
options	可選項數據源，鍵名可通過 `props` 屬性配置	array	—	—
props	配置選項，具體見下表	object	—	—
value	選中項綁定值	array	—	—
separator	選項分隔符	string	—	斜杠'/'
popper-class	自定義浮層類名	string	—	—
placeholder	輸入框占位文本	string	—	請選擇
disabled	是否禁用	boolean	—	false
clearable	是否支持清空選項	boolean	—	false
expand-trigger	次級菜單的展開方式	string	click / hover	click
show-all-levels	輸入框中是否顯示選中值的完整路徑	boolean	—	true
filterable	是否可搜索選項	boolean	—	—
debounce	搜索關鍵詞輸入的去抖延遲，毫秒	number	—	300
change-on-select	是否允許選擇任意一級的選項	boolean	—	false
size	尺寸	string	medium / small / mini	—
before-filter	篩選之前的鈎子，參數為輸入的值，若返回 false 或者返回 Promise 且被 reject，則停止篩選	function(value)	—	—

props

參數	說明	類型	可選值	默認值
value	指定選項的值為選項對象的某個屬性值	string	—	—
label	指定選項標簽為選項對象的某個屬性值	string	—	—
children	指定選項的子選項為選項對象的某個屬性值	string	—	—
disabled	指定選項的禁用為選項對象的某個屬性值	string	—	—

Events

事件名稱	說明	回調參數
change	當綁定值變化時觸發的事件	當前值
active-item-change	當父級選項變化時觸發的事件，僅在 `change-on-select`為 `false` 時可用	各父級選項組成的數組
blur	在 Cascader 失去焦點時觸發	(event: Event)
focus	在 Cascader 獲得焦點時觸發	(event: Event)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Cascader 級聯選擇器無法賦值 element 級聯選擇器-Cascader Cascader 級聯選擇器hover選擇效果 el-cascader 級聯選擇器沒有子級的時候不能選擇獲取el-cascader級聯選擇器的label值關於前端vue el-cascader級聯選擇器 cascader 無限級聯選擇器渲染數據問題 element-ui Cascader 級聯選擇器示例 element ui - Cascader 級聯選擇器樣式 Element cascader 級聯選擇器點擊文字選中