Element-UI的級聯組件官方文檔

<el-cascaderv-model="value":options="options":props="{ expandTrigger: 'hover' }"@change="handleChange"></el-cascader>

說明：
options:綁定數據源
props:數據配置項
v-model=“value”:雙向綁定級聯選擇框中選中的value值
@change=“handleChange” :當級聯選擇框變化，觸發handleChange事件，可返回選中項的值
使用：

<!--級聯選擇框--> <el-cascaderv-model="selectedKeys":options="parentList":props="cascaderProps"@change="parentCateChange" clearable></el-cascader> export default(){data(){return {//選中項的cat_id數組selectedKeys:[],//數據源信息parentList:{},//數據的配置信息cascaderProps:{//可以選中一級內容checkStrictly:true,//指定觸發方式expandTrigger: 'hover',//數據源parantList中的cat_id做數據綁定value:'cat_id',//數據源parantList的cat_name渲染出來的內容label:'cat_name',//數據源parantList的children做嵌套children:'children'} }},methods:{handleChange(){console.log(this.selectedKeys)}} }

注：·el-cascader中的clearable屬性表示點擊叉可清空選中框內容

如果出現一級分類菜單沾滿全屏的現象：
在全局樣式的global.css中添加一下面樣式即可(在頁面中都會生效)

.el-scrollbar__wrap {height: 300px !important }

總結

以上是生活随笔為你收集整理的Element-UI中Cascader 级联选择器使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。