基于layui的cascader级联选择器

Posted 2023-05-12

参考技术A 最近做的需求有需要到级联选择器，发现项目中之前并没有用到级联选择器，上网寻找到一个好用的无限cascader级联选择器，直接上个图先：

项目之中之前用过layui的在对应目录引入cascader模块的文件，如图：

使用下来整体还是很简单的，主要源码难得能看得懂。
js

css

基于Element UI Cascader 级联选择器的中国省市区级联数据

安装

npm install element-china-area-data -save

 

在线演示：https://plortinus.github.io/element-china-area-data/index.html

github：https://github.com/airyland/china-area-data

 

引入

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from ‘element-china-area-data‘

数据说明：

• provinceAndCityData是省市二级联动数据（不带“全部”选项）
• regionData是省市区三级联动数据（不带“全部”选项）
• provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
• regionDataPlus是省市区三级联动数据（带“全部”选项）
• "全部"选项绑定的value是空字符串""
• CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000‘]输出北京市
• TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode[‘北京市‘].code输出110000,TextToCode[‘北京市‘][‘市辖区‘].code输出110100,TextToCode[‘北京市‘][‘市辖区‘][‘朝阳区‘].code输出110105