<template>
<div class="block">
<h1 class="demonstration">选中的值:{{ value }}</h1>
<el-cascader
:options="options"
v-model="value"
popper-class="cascaderBox"
:props="defaultProps"
clearable
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
value: "10",
defaultProps: {
emitPath: false,
checkStrictly: true,
value: "id",
label: "name",
children: "children",
},
options: [
{
id: "1",
name: "分类1",
children: [
{
id: "10",
name: "列表1",
},
{
id: "11",
name: "列表2",
},
],
},
{
id: "20",
name: "分类2",
children: [
{
id: "21",
name: "列表1",
},
{
id: "22",
name: "列表2",
},
],
},
],
};
},
methods: {
visibleChange() {
if (this.$refs["cascader"]) {
this.$refs["cascader"].closeVisible = false;
}
},
},
};
</script>
<style lang="less">
.el-cascader-panel .el-radio {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 10px;
right: 10px;
}
.el-cascader-panel .el-radio__input {
visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}
</style>