vue 自定义 el-cascader 展示文字及样式_el-cascader separator

首先，自定义 popper-class，因为设置的样式需要全局设置才生效，使用定义的类，可以避免影响到其他页面的效果 ：

<el-cascader separator="" v-model=" fieldValue" popper-class="pc-sel-area-cascader" style="width:543px" :options="divisionOptions" :props="props" placeholder="请选择区域"></el-cascader>
1

其中，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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

页面效果如下：