首页
学习
活动
专区
圈层
工具
发布

Vue实现echarts地图与table表格数据联动

前言 今天后端突然告诉我说,需要我实现一下通过点击地图,获取地图的地址,然后通过地址名称来拿取table表格的数据,从而实现表格和数据的联动,我一想,不就添加一个点击事件嘛,简单,结果。。。。...要求实现功能 通过点击地图上面的地址,来改变table表格数据 例如点击绍兴市,那么下拉选择框里面的内容就显示绍兴市,table表格里面的内容也显示绍兴市的数据 进行地图以及表格的渲染 渲染地图 drawMap...}); console.log(33333); }, 复制代码 给地图添加点击事件,使用myChart.on方法,之后在mounted里面调用drawMap方法即可生成地图 构建表格...表格可以使用elementui官网里面的table表格,直接复制粘贴过来后,将需要渲染的内容以及字段更改即可 调取查询接口 写上一个查询方法,来调取查询接口 //获取数据 getexList...console.log(this) this.getexList(); }); 复制代码 Ok,这样就实现了通过点击地图上面的地址来改变table表格数据的功能

3K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    表单联动解决方案探讨

    “表单联动”是前端开发中的经典场景。本文对于表单联动问题的解决方案进行一个简单的探讨。 表单依赖关系的建模 表单联动是前端经常面临的问题,联动实际上是一组表单项和表单项之间的依赖关系的集合。...比如经典的“省-市-区”三级联动,就包含了“省”、“市”、“区”三个表单项,以及“市->省”和“区->市”。...在监听到表单项的更新之后,拷贝一个表单的草稿,按照更新队列的顺序更新草稿,再整体更新表单。比如(React DEMO): import produce from 'immer'; // ......产生这种问题的原因,就是表单在初始情况下的依赖关系不明确,各个表单项处在一个全部可选的状态。...只有当该表单项的所有依赖项都确定了取值之后,才能更改。 在开始时明确指定依赖关系,并给出一个表单的默认值。此时表单的状态成为状态机中的某个具体状态节点,就不会产生混沌不清的依赖关系。

    3.8K10

    JimuReport积木报表—表格联动图表专题

    联动是指在一个报表中点击表格某行或者图表某区域,根据点击数据重新渲染联动的图表。积木报表联动分为表格联动图表和图表联动图表,下面我们就来看看表格数据如何联动图表吧!...# 示例效果 示例:点击班级列表的班级id,联动展示班级下的学生成绩图表。 # 联动配置步骤 1.设计报表 首先准备两个报表,一个数据列表 “班级列表”、一个图形报表 “班级学生分数图表”。...— 详情数据集 根据班级 classid 查询学生分数信息 3.重点来了—配置超链接 3.1 添加链接 点击 “班级列表” 中的 "#{ty.id}"单元格,设置右侧面板 “添加链接” +,选择图表联动...;如下图: 3.2 联动参数配置 链接名称:填写链接名称(随意填写) 链接图表:选择链接图表—“班级学生分数图表” 参数设置说明:点击“班级列表” 时通过“班级id”来联动“班级学生分数图表”,所以联动参数如下...“原始参数—id”为“班级列表” 中的班级id “映射参数—classid”为传至“班级学生分数图表” 中的参数classid 配置完成,保存后,点击预览即可查看联动效果。

    1.3K40

    WEB入门二 表格和表单

    学习内容 Ø 表格的作用和制作 Ø 表单的制作 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的常用属性; Ø 理解表单的作用 Ø...这种由用户填写并提交给服务器的页面元素称为表单,表单在页面设计中主要用于收集和提交客户端的信息,完成客户端与服务器的交互。...本章将学习如何在页面中创建一个表格以及表格的基本操作,例如合并单元格、使用背景图像美化表格、创建表单以及表单元素的基本用法。最后,通过举例讲解表格与表单的综合应用。...语法: 表格宽度” height=”表格高度” border=”表格边框宽度”> 其中,表格的宽度和高度可以用像素来表示,也可以用百分比(与浏览器当前窗口相比的大小比例...2.1.19表单 通常情况下,为了保证表单的格式整齐、清晰,在创建表单时,可以使用表格搭建页面的框架。

    4.2K10

    【HTML】HTML 注册表单案例 ① ( 表格设置 | 设置表格位置和大小 | 设置表格标题 | 表单设置 | 表格中设置单选按钮 )

    文章目录 一、表格设置 1、设置表格位置和大小 2、设置表格标题 3、完整代码示例 二、表单设置 1、表格中设置单选按钮 3、完整代码示例 一、表格设置 ---- 1、设置表格位置和大小 在 html...-- 设置表格宽度 600 像素, 表格居中 --> 如果设置了 table 表格的 宽度为 600 像素 , 则...浏览器 缩小到 600 像素 , 就不能再缩小了 ; 下图中 浏览器 窗口已经缩小到最小 ; 2、设置表格标题 在 table 表格标签中 , 使用 caption 标签 设置 表格标题 ; 表格宽度 600 像素, 表格居中 --> 表格标题 --> 用户注册信息 二、表单设置 ---- 1、表格中设置单选按钮

    9.5K20

    bootstrap快速入门笔记(七)-表格,表单

    一,表格 1,中加.table类 2,条纹表格:通过 .table-striped 类可以给  之内的每一行增加斑马条纹样式。...5,紧缩表格 .table-condensed:让表格更加紧凑 6.状态类 通过这些状态类可以为行或单元格设置颜色。...a,垂直方向的内容截断:     响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部的内容截断。特别    是,也可以截断下拉菜单和其他第三方组件。   ....form-group也可以; 2,内联表单:  元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。...3),文本域:支持多行文本的表单控件。可根据需要改变 rows 属性。

    5.2K30

    CSS :has() 选择器实战:父级反向控制与表单状态联动

    :has()出现后,浏览器允许在选择器里写“包含某个满足条件的后代”的父级匹配,也可以配合兄弟选择器实现更灵活的状态联动。...下面从实际开发角度梳理:has()的语法、常见用法、与表单控件结合时的注意点,以及如何在不依赖构建工具的情况下渐进增强。语法与基本匹配逻辑:has()接受一个相对选择器列表,作为参数放在括号里。...表单状态联动减少JS类切换后台表单里常见的一种交互:每个表单项外面包一层.field,内部有label、input和错误提示。输入框聚焦时整行高亮,输入非法时错误提示显示,输入合法时错误提示隐藏。...另一个常见场景是表格行内有禁用按钮时整行置灰:展开代码语言:CSSAI代码解释tr:has(button:disabled){opacity:0.6;}这种规则在权限系统里很好用,按钮是否disabled...与兄弟选择器组合处理前后关系:has()不只可以看后代,也可以看兄弟。

    11710

    《不止于“开箱即用”:DevUI 表格与表单组件的高阶用法与避坑手册》

    零基础入门到项目实战 Electron适配开源鸿蒙专栏:Electron for OpenHarmony Flutter 适配开源鸿蒙专栏:Flutter for OpenHarmony DevUI 表格与表单组件的高阶用法与避坑手册...(Table)与表单(Form) 是使用频率最高、业务逻辑最复杂的两大组件。...本文将带你超越“开箱即用”,深入 DevUI 表格与表单的高阶能力边界,分享我们在云管理平台、运维中台等项目中积累的实战技巧与避坑经验,助你打造既高效又流畅的企业级交互体验。...✅ 场景3:复杂嵌套对象表单(如网络配置、资源配额) 挑战:表单模型为多层嵌套对象(如 form.network.vpcId, form.quota.cpu),如何绑定与校验?...五、延伸探索 将 DTable 与 低代码引擎 结合,实现可视化列配置 在 DForm 中集成 MateChat 智能助手(官网),通过自然语言生成表单配置 使用 DevUI Pro 获取高级功能:树形表格

    38410
    领券