1.选择cascader的任意级别
<el-cascader :props="defaultProps"></el-cascader>
data(){
return {
defaultProps: {
....
checkStrictly:true // 设置属性为true
....
}
}
}
2.隐藏小圆圈问题
实现效果的基本思路
1.设置小圆为相对位移
2.设置小圆的大小和父div相同
3.通过right左移抵消padding
4.设置visibility为hidden，隐藏小圆
// 自定义浮层类名
popper-class="app-option"
// 设置全局样式控制
<style lang="scss">
// 设置样式
.app-option{
.el-cascader-panel .el-radio {
position: absolute;
width:100%;
height:100%;
right:-10px;
}
.el-cascader-panel .el-radio .el-radio__input {
visibility: hidden;
}
/*长度限制*/
.el-cascader-panel{
.el-cascader-menu{
max-width: 200px;
}
}
}
实例：
// Cascader 级联选择器
<template>
<div class="app">
<el-cascader ref="mycascader"
:options="options"
popper-class="app-option"
v-model="value"
:props="{ checkStrictly: true }"
@active-item-change ="handleItemChange"></el-cascader>
<el-button @click="pullAction()">下拉</el-button>
</div>
</template>
<script>
export default {
data () {
return {
value: [],
options: []
}
},
created () {
this.getOption()
},
methods: {
pullAction () {
this.$nextTick(() => {
this.$refs['mycascader'].toggleMenu() })
},
async getOption () {
let data = await this.getData()
this.options = data.options
},
async getData () {
let temp
let updataObj = {
method: 'get',
url: '/mockUrl',
params: ''
}
await this.$api.getDataApi(updataObj.method, updataObj.url, updataObj.params).then(res => {
console.log(res)
temp = res
})
return temp
},
handleItemChange () {
}
}
}
</script>
<style lang="scss">
// 核心思路：
// 设置小圆为相对位移
// 设置小圆的大小和父div相同
// 通过right左移抵消padding
// 设置visibility为hidden，隐藏小圆
.app-option{
.el-cascader-panel .el-radio {
position: absolute;
width:100%;
height:100%;
right:-10px;
}
.el-cascader-panel .el-radio .el-radio__input {
visibility: hidden;
}
/*长度限制*/
.el-cascader-panel{
.el-cascader-menu{
max-width: 200px;
}
}
}
</style>