级联组件-cascader_element-ui

级联组件-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、应用场景

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

4.1、全加载

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

• 代码：

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

• 省市区数据示例：

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

4.2、懒加载

• 实例：2017国民经济行业分类展示

• 代码：

    <el-cascader
    			v-model="industries"
    			:props="industryOptions"
    			placeholder="请选择所属行业"
    			style="width: 100%"
    		  ></el-cascader>
  
    industries: [],
    industryOptions: {
    	lazy: true,
    	async lazyLoad(node, resolve) {
    	  console.log(node, 'node');
    	  const {root, level} = node
    	  let id = 0
    	  if (!root) {
    		id = node.value
    	  }
    	  let {industries} = await subData(id)
    	  industries = industries.map(item => ({
    		value: item.id,
    		label: item.name,
    		leaf: level >= 3
    	  }))
    	  resolve(industries)
    	}
    },
  

• subData接口

    // 根据id查询行业子级数据
    export function subData(id) {
      return request({
    	url: `/industry/subData/${id}`,
    	method: 'get'
      })
    }
  

• 返回行业数组数据示例：

    [
    	{
    		id: 1,
    		code: "01",
    		name: "农业",
    		...
    	},
    	...
    ]
  

• 2017国民经济行业分类sql

2017国民经济行业分类sql =传送门=

• 效果图示：

5、美化

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

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

后记 ：

  欢迎交流，本人QQ:806797785

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