Vue+Openlayers+el-checkbox-group实现多选图层的显示与隐藏

最新推荐文章于 2024-07-29 11:05:02 发布
最新推荐文章于 2024-07-29 11:05:02 发布
阅读量1.9k 收藏 4
点赞数
分类专栏： GIS相关 文章标签： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/123895189
版权
GIS相关 专栏收录该内容
130 篇文章 4 订阅 ¥15.90 ¥99.00
订阅专栏

场景

Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏：

Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏_霸道流氓气质的博客-CSDN博客

上面通过el-checkbox以及图层点的setVisble属性为true或者false来实现图层的显示与隐藏。

也可以使用el-checkbox-group，代码逻辑使用switch判断的方式决定隐藏和显示。

 

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取

了解本专栏 订阅专栏 解锁全文
霸道流氓气质
关注
专栏目录
订阅专栏
Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏
BADAO_LIUMANG_QIZHI的博客
12-28 1739
场景 Vue+Openlayers实现地图上绘制线： Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面实现加载多个图层的基础上，可以实现勾选多选框配置图层的显示与隐藏。 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、页面上添加el-checkbox ...
vue 使用element-ui的el-checkbox-group组件
热门推荐
wtt_1990的博客
08-07 1万+
<el-checkbox-group v-model="rulesId" class="rules-label" > <el-checkbox v-for="(rule,i) in rulesList" :label="rule.leavel_id" :key="rule.leavel_id" :value="rule.leavel_id" v-model="rule.isChecked" @change="val => handleChecked(val,rule)"&gt.
Vue2/element-ui el-table实现指定行的隐藏与显示，并自动根据显示的行数调整列表合并项
最新发布
AtlaS_Y的博客
07-29 497
目标效果：根据el-checkbox组件绑定选择的属性，自动调整表项，以实现只显示选中的属性，并且自动调整列表合并项，以实现年份和属性的正确对应。
【Vue3】el-checkbox-group实现权限配置和应用
weixin_47375144的博客
03-31 1384
Vue3 el-checkbox-group 数据选择和回显
vue/elementUI CheckBox多选框赋值(设置`el-checkbox-group`以及`v-for`遍历`el-checkbox`)
★【World Of Moshow 郑锴】★
01-07 1万+
最近有个功能，需要给项目添加一个多选赋值的功能，项目基于renren-security也就是半js半vue模式的前端。 **需求展示：** - 给定一个字段，例如技术领域，页面上设置为checkbox多选项。 - 选择之后，保存json字符串到数据库（直接value的形式） - 列表展示直接用json字符串展示 - 详情页面根据之前选定的json字符串设置对应的选项打勾
Vue el 使用el-checkbox-group复选框进行单选框操作
小菜鸟的博客
09-30 9569
让复选框进行单选框操作 el-checkbox-group这个组件与其他复选框不一样，我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大，v-ror循环应该看的懂。重要的是@chage到我们写的类 <el-checkbox-group v-model="checked" size="medium"> <el-checkbox-button v-for="city in cities" :label="city" :key
Vue+Openlayers+el-radio实现切换地图显示
BADAO_LIUMANG_QIZHI的博客
12-29 1740
场景 Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏： Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏_BADAO_LIUMANG_QIZHI的博客-CSDN博客 上面实现图层的隐藏和显示，如果将图层换为各个地图的图层，那就可以实现切换地图的效果。 首先ol中至少实现加载两种地图。 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图： Vue中使用Openlayers加载OSM(Open S
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8259
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-31 1815
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。
基于openlayer5.2开发的显示geowave图层案例(geowave+hbase)
hsg77的专栏
09-29 901
基于openlayer5.2开发的显示geowave图层案例(geowave+hbase) &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;U
vue ＜el-checkbox-group＞多选框回显
toString的博客
08-24 2816
vue多选框回显问题
vue之ele中el-checkbox-group复选框组件的使用
weixin_47409897的博客
05-05 5288
目录vue之ele中el-checkbox-group复选框组件的使用Home.vueSetTeam.vue vue之ele中el-checkbox-group复选框组件的使用 Home.vue <!-- 描述： 作者：xzl 时间：05月05日160944 --> <template> <div> <div>checkedId - {{ checkedId }}</div> <el-checkbox-group
Vue应用openLayers实现图层数据切换显示，图层加载
总结前端开发中遇到的问题，分享前端知识
07-06 2571
🔜本篇文章介绍图层设置航标、港口码头、锚地停泊区数据的获取，以及以天地图作为底图添加到上航道图层上面；点击图层可以选择控制图层数据隐藏显示以及数据的处理。.🔜技术应用：vue + vant-ui + openlayers 图层设置： data定义图层显示列表数据shipLayerList： mounted加载数据： 这里主要讲航标、港口图层，其他的图层方法和数据获取类似。methods中定义:初始化方法 动态显示图层方法 手动调整图层，点击图层显示切换 获取航标数据，获取港口数据是一样的操作，参照航..
vue中el-checkbox-group无法选中
HH_KELE的专栏
04-18 3041
原因：vue中给对象新增属性直接用=赋值方式，虽然可以新增属性，但是不会触发视图更新 例如定义了temp对象在操作过程中又新增了b属性 data () { return { temp: { a: '' } } } //直接赋值不会触发视图更新 this.temp.b= 24 可以新增属性，但是不会触发视图更新 vue2.0以上可以用 this.$set()更新视图 解决办法 this.$set(...
vue中循环多组checkbox-group
m0_57442975的博客
10-12 5920
1.因为官网给出的checkbox group绑定的数据格式是数组，而在项目中接收的数据通常是对象数组，我这里label绑定的是数组中对象的id属性，点击获取的是id的数组，在最后提交数据时需要做处理。2.一开始也尝试了label绑定整个对象，这样获取到的直接便是最终需要的对象数组，展示和添加是可以实现的，但是回显遇到了问题，在网上看是回显的数据格式要与选中的数组中对象的格式一致，尝试了没有效果，后面再研究一下。
vue elementui 结合 el-checkbox-group 组件实现全选效果
Z18834071903的博客
04-24 1007
vue elementui 结合 el-checkbox-group 组件实现全选效果
原创：vue使用elementUI的复选框el-checkbox-group与el-checkbox回显失效问题解决！！
HD243608836的博客
04-27 1万+
一、场景： 用户表——角色表，用户管理界面可以选择角色，并且每次初始化时候支持“回显”，如图： 使用elementUI的复选框组合： el-checkbox-group el-checkbox 二、上代码： 1. 整体结构（列表页和详情页）： 2. detail页面的组件Info： <el-checkbox-group v-model="chooseRoleNames"> <el-checkbox v-for="(item,index) in totalR
vue 动态生成 el-checkbox-group 遇到的v-model绑定问题记录
qq_38405436的博客
09-20 2663
正如标题说的，这次遇到的问题与el-checkbox-group 有关，这次要实现的功能是要为用户分配角色，并且根据角色分配对应模块的操作权限（增、删、改、查、审等等），还有就是回显已分配用户对应模块的操作权限。好了，问题就出现在回显这！好久没有记录新内容了，主要项目时间有点赶，还有电脑太卡了~~~8小时上班时间，等电脑缓冲都要等2个多小时，还是入手一台新的吧，老朋友该退休了！代码水平就那样了 ，欢迎各位大佬指正和提供宝贵的意见，小弟在此跪谢了~~~刚开始的时候还在created。
vue2使用el-checkbox-group实现多选
05-26
可以按照以下步骤使用 `el-checkbox-group` 实现多选： 1. 在 Vue 组件中引入 `el-checkbox-group` 和 `el-checkbox` 组件： ```html <template> <el-checkbox-group v-model="checkedFruits"> <el-checkbox label="apple">Apple</el-checkbox> <el-checkbox label="banana">Banana</el-checkbox> <el-checkbox label="orange">Orange</el-checkbox> </el-checkbox-group> </template> <script> import { ElCheckboxGroup, ElCheckbox } from 'element-ui'; export default { components: { ElCheckboxGroup, ElCheckbox, }, data() { return { checkedFruits: [], }; }, }; </script> ``` 2. 定义一个数组 `checkedFruits` 用于存储选中的水果的值。 3. 在 `el-checkbox-group` 中使用 `v-model` 绑定 `checkedFruits` 数组，这样选中的水果值就会被存储在 `checkedFruits` 中。 4. 在 `el-checkbox` 组件中使用 `label` 属性指定水果的值。 5. 如果需要在表单中提交选中的水果值，可以将 `checkedFruits` 数组绑定到表单的 `v-model` 上，这样选中的水果值就会被提交给后端。例如： ```html <template> <form @submit.prevent="submitForm"> <el-checkbox-group v-model="checkedFruits"> <el-checkbox label="apple">Apple</el-checkbox> <el-checkbox label="banana">Banana</el-checkbox> <el-checkbox label="orange">Orange</el-checkbox> </el-checkbox-group> <button type="submit">Submit</button> </form> </template> <script> import { ElCheckboxGroup, ElCheckbox } from 'element-ui'; export default { components: { ElCheckboxGroup, ElCheckbox, }, data() { return { checkedFruits: [], }; }, methods: { submitForm() { // 提交表单时将选中的水果值发送到后端 console.log(this.checkedFruits); }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值