级联组件-cascader_element-ui

文章目录

• • 1、常用属性
  • 2、事件
  • 3、全加载和懒加载
  • • 3.1、全加载
    • 3.2、懒加载
    • 3.3、对比
    • 3.3、数据回显问题与解决方案
  • 4、应用场景
  • • 4.1、全加载
    • 4.2、懒加载
  • 5、美化
  • ***后记*** ：

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

1、常用属性

• props配置项

2、事件

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级数据显示

• 代码：

     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
},
…
]
},
…
]

4.2、懒加载

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

• 代码：

    industries: [],industryOptions: {lazy: true,async lazyLoad(node, resolve) {console.log(node, 'node');const {root, level} = nodelet id = 0if (!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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！