Element-UI的級聯(lián)組件官方文檔

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。