在element plus中使用checkbox 多选框实现大区省市区选择回选
1.产品拿来淘宝后台页面,希望我们的快递发货也用这一套
长这样:
2.后端说提供的数据是树形结构,大区id不要传,传省的id,勾选哪个传哪个
3.element ui的树形插件和级联选择器在数据上是可以实现的,但是ui应该不行,最后决定用checkbox 多选框自己写一个
4.el-checkbox 主要是indeterminate属性(控制中间状态)和 v-mode显示是否被显示
5.数据来源:最初是后端返回的树形结构数据,后面发现太旧。改用vant的省市区数据
npm i @vant/area-data
引入,再转为原来的树形结构:
// 省市区转树形结构
import { areaList } from '@vant/area-data'
console.log(areaList); export const location = () => {
let areaData:any= {
province:[],
city:[],
area:[]
}
for (let key in areaList.province_list) {
areaData.province.push({
name:areaList.province_list[key],
code:key
})
}
for (let key in areaList.city_list) {
areaData.city.push({
name:areaList.city_list[key],
code:key
})
}
for (let key in areaList.county_list) {
areaData.area.push({
name:areaList.county_list[key],
code:key
})
}
return areaData
}
export const locations = () => {
let datas: any = []
let data: any = [
{
areaName: '华北',
childrenList: [],
coding: 1000000,
id: 1,
level: 0,
parentId: 0
},
{
areaName: '东北',
childrenList: [],
coding: 2000000,
id: 2,
level: 0,
parentId: 0
},
{
areaName: '华东',
childrenList: [],
coding: 3000000,
id: 3,
level: 0,
parentId: 0
},
{
areaName: '华南',
childrenList: [],
coding: 4000000,
id: 4,
level: 0,
parentId: 0
},
{
areaName: '华中',
childrenList: [],
coding: 8000000,
id: 8,
level: 0,
parentId: 0
},
{
areaName: '西南',
childrenList: [],
coding: 5000000,
id: 5,
level: 0,
parentId: 0
},
{
areaName: '西北',
childrenList: [],
coding: 6000000,
id: 6,
level: 0,
parentId: 0
},
{
areaName: '港澳台',
childrenList: [],
coding: 7000000,
id: 7,
level: 0,
parentId: 0
}
] for (let key in areaList.province_list) {
datas.push({
areaName: areaList.province_list[key],
childrenList: [],
coding: Number(key),
id: Number(key.slice(0, 2)),
level: 1,
parentId: (key == '410000' || key == '420000' || key == '430000') ? 8000000 : (key == '810000' || key == '820000') ? 7000000 : Number(key.slice(0, 1)+'000000')
}) }
datas.map((item: any) => {
for (let key in areaList.city_list) {
if (key.slice(0, 2) == item.id) {
item.childrenList.push({
areaName: areaList.city_list[key],
childrenList: [],
coding: Number(key),
id: Number(key.slice(0, 4)),
level: 2,
parentId: item.coding
})
} }
})
datas.map((item: any) => {
item.childrenList && item.childrenList.length > 0 && item.childrenList.map((child: any) => {
for (let key in areaList.county_list) {
if (child.id == key.slice(0, 4)) {
child.childrenList.push({
areaName: areaList.county_list[key],
childrenList: [],
coding: Number(key),
id: Number(key),
level: 3,
parentId: child.coding
})
}
}
})
}) data.map((item: any) => {
datas.map((child: any) => {
if (item.coding == child.parentId) {
item.childrenList.push(child)
}
})
})
let result =[data,datas] return result
}
export const areaData = locations()[0]
export const areaRegion = locations()[1]
export const areaListData = location()
在组件页面引入,最终效果:
代码地址:https://gitee.com/yuexiayunsheng/vue3learn.git
在element plus中使用checkbox 多选框实现大区省市区选择回选的更多相关文章
- Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据
原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...
- 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- checkebox 全选 ,子复选框单个全部选择后,全选框也会被选择
<script> //点击全选,子复选框被选中 function demo(){ var allcheck=document.getElementById("allcheck&q ...
- JQuery的复选框选中、取消、全选,全不选问题
一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...
- php处理表单中的复选框问题以及js实现全选
做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...
- HTML--使用单选框、复选框,让用户选择
在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看 ...
- Selenium3自动化测试【28】单选框、复选框、下拉选择框
Html页面中的单选按钮.复选框.下拉框均可通过WebDriver实现操做.本节结合案例一起来看看WebDriver如何操做这些控件. 同步视频知识与系列知识内容,可关注:[公众号]:柒哥测试:[WX ...
- firefox(火狐)下 js中设置checkbox属性checked="checked"已有,但复选框却不显示勾选的原因
刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...
- jquery如何判断checkbox(复选框)是否被选中 全选 反选
好长时间没用jq, 之前用的都是ng. 想着随便参考一下,结果被坑.因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google 给出坑人文章的链接 ...
随机推荐
- tomcat不生成日志文件
1.不生成 catalina.out 将 /bin/catalina.sh 文件中的: if [ -z "$CATALINA_OUT" ] ; then CATALINA_OUT= ...
- JS form表单数据校验及失效情况下的解决方案
如下图,当执行提交操作之前,我们需要对序号,要求完成时间,责任人,措施内容四项进行非空,字符长度及输入内容的类型进行校验. 直接贴样式代码 <div class="wrapper an ...
- PHP_递归实现无限级分类
<?php /** * 递归方法实现无限级别分类 * @param array $list 要生成树形列表的数组[该数组中必须要有主键id 和 父级pid] * @param int $pid= ...
- 5G工业智能网关助力智能制造开辟新赛道
今年以来,物联网技术加速产业变革,制造业出现了不少新现象.从大规模到个性化.从"渠道为王"到"用户定义".从自有工厂到共享协同,智能化制造在很多地方颠覆了传统模 ...
- 为什么 .NET应用推荐使用 await、async异步编程?
前言 1.什么是async/await? await和async是.NET Framework 4.5框架.C#5.0语法里面出现的技术,目的是用于简化异步编程模型. 2.async和await的关系 ...
- FTP主动模式(Port)和被动模式(Passive)的区别
1.FTP的PORT(主动模式): PORT中文称为主动模式,工作的原理: FTP客户端(1024以上端口)连接到FTP服务器的21端口,发送用户名和密码登录, 登录成功后要list列表或者读取数据时 ...
- Kubernetes初识
目录: 云原生 Kubernetes概述 1.K8S是什么 2.为什么要用K8S 3.Kubernetes集群架构与组件 K8S的特性 核心组件 Master组件 配置存储中心 Node组件 Kube ...
- path.resolve和path.resolve的用法
前言:要搞清楚path.join()和path.resolve的具体作用,最好自己搞个文件,用node跑一遍去测试一下.只有自己亲自动手实践了,才知道具体是怎么回事,才能真正的理解 一.path.jo ...
- 虚拟机中debian11修改控制台(console)分辨率|linux控制台分辨率|linux console resolution
实体机一般安装好驱动分辨率就没啥问题,而且个人pc也没有只用控制台的需求.但是虚拟机中不安装桌面的时候,默认的控制台分辨率常不能满足需求. 这个需求貌似也比较少,而且几乎搜到的文章大部分都是旧的,不能 ...
- Linux上的I2C基础知识
Linux上的I2C基础知识 什么是I2C I2C(Inter-Integrated Circuit,eye-squared-C),也称为 I2C 或 IIC,是一种同步.多控制器/多目标(主/从). ...