首先,自定义 popper-class
,因为设置的样式需要全局设置才生效,使用定义的类,可以避免影响到其他页面的效果 :
<el-cascader separator="" v-model=" fieldValue" popper-class="pc-sel-area-cascader" style="width:543px" :options="divisionOptions" :props="props" placeholder="请选择区域"></el-cascader>
其中,separator=""
是设置选择省市区值之间的分割符号,效果如下:
不设置 separator
的时候,默认为 ‘/’,效果如下:
设置为 separator="--"
,效果如下:
接下来,自定义 el-cascader
的样式:
<style lang="less">
.pc-sel-area-cascader {
// 选择面板样式
.el-cascader-panel {
width: 543px;
}
.el-cascader-menu__wrap {
// 设置选择器省市区分块面板高度
height: 305px;
}
.popper__arrow {
// 输入框下面小三角形
display: none;
}
.el-cascader-menu {
// 省市区分块右边框
border: none;
}
.el-cascader-node {
height: 40px;
}
.el-cascader-node:hover {
// 设置鼠标滑过时文字颜色
color: red;
}
.el-cascader-node__label {
// 设置文字样式
padding: 0 7px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
// 文字选中样式及span背景颜色
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
color: red;
background: #fafbfb;
}
.el-icon-check {
// 去掉选中小对勾
display: none !important;
}
.el-icon-arrow-right {
// 选项去掉右侧小图标
display: none !important;
}
}
.el-popper[x-placement^='bottom'] {
// 选择器面板与输入框的距离
margin-top: 0;
}
.el-cascader__dropdown {
// 选择器面板边框及圆角设置
border-radius: 12px;
border: 1px solid #f6f7f8;
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.07);
}
</style>
页面效果如下: