级联组件-cascader_element-ui

---

目录

---

---

内容

---

已很常用的省市县3级地区数据显示为例，图示：

1、常用属性

名称	类型	取值	默认值	描述
value/v-model	-	-	-	级联框选中的数据
options	array	-	-	级联框要展示的数据
props	object			配置项，详细见下面
placeholder	string		select	输入框提示信息
clearable	boolean		false	输入框末尾是否显示清除选项，点击清空输入框
show-all-levels	boolean		true	输入框中是否显示所有选中的层级数据
collapse-tags	boolean		flase	在多选模式下，是否折叠
separator	string		/	选中项层级数据直接的分割符

• props配置项

| 名称 | 类型 | 取值 | 默认值 | 描述 |
| expandTrigger | string | click/hover | click | 展开模式:click-点击,cover-覆盖(经过) |
| multiple | boolean | | false | 是否允许多选 |
| checkStrictly | boolean | | false | 一个节点的选中状态是否影响其父级和自己节点 |
| lazy | boolean | | false | 是否开启懒加载 |
| lazyLoad | function(node,resolve) | | | 加载子级节点数据方法，前提:lazy=true |
| value | string | | value | 选中项绑定的值,对应数据中的key |
| label | string | | label | 级联下拉框展示的内容,对应展示数据的key |
| children | string | | children | 子级数据，对应要展示数据中的key |

2、事件

名称	参数	描述
change	value-改变之后的值(数组)	当绑定值改变(选择改变)时触发

3、全加载和懒加载

3.1、全加载

• 释义：层级数据一次请求，全部加载显示

3.2、懒加载

• 释义：点击触发请求，第一次点击请求顶级层级数据，当单击某一个顶级层级数据，触发请求它的子级数据，以此类推

3.3、对比

• 全加载

  • 优势：
    • 只发送一次请求
    • 数据回显方便
  • 劣势：
    • 当数据量过大，瞬时网络占用，页面资源加载很慢，势必影响

• 懒加载：和全加载相反

3.3、数据回显问题与解决方案

• 数据回显场景：在数据需要修改的时候，数据的当前值需要初始化到级联框的输入框中

• 问题：全加载模式把v-model绑定的数组，赋值数据的当前值即可回显数据；但是懒加载模式，因为数据是通过点击加载子级数据，上面的方式不生效；

• 解决方案：把数据当前值赋值给placeholder属性，修改下placeholder样式，达到数据回显目的，参考地址https://blog.csdn.net/oneclarence/article/details/106271197

4、应用场景

• 适用场景：带有层级的数据展示和选择都可以使用级联选择框，比如省市区、行业分类、公司部门等等

• 实例：省市区3级数据显示

• 代码：

     <el-cascaderv-model="districts":options="districtList":props="districtOptions"placeholder="请选择公司所在地区"></el-cascader>districts: [],districtList: [],districtOptions: {value: "name", //使用id更合适，只是为了查询方便，使用了namelabel: "name",expandTrigger: "hover"}
  

• 省市区数据示例：关于数据库查询地区表，并封装层级数据（可前端递归封装，也可以后端递归层级封装），可自行查阅相关文档或者等后续我单独写篇博客

districtList: [
{
id: 1,
level: 1,
name: “北京”,
pid: 0,
children: [
{
id: 3216,
level: 2,
name: “北京市”,
pid: 1
},
…
]
},
…
]

这里我用的是全加载，懒加载模式，小伙伴自行测试。

5、美化

element-ui的级联下拉框显示部分可以，但是输入框显示只是简单的文字描述，是不是太单调了些，对比vuetify的下拉输入框显示，如图：

那么我们是不是做一些优化呢?这里我只抛个引子，有兴趣的小伙伴可以研究下。毕竟改样式方面我是个弱鸡。

后记 ：

  欢迎交流，本人QQ:806797785

项目源代码地址：https://gitee.com/gaogzhen