荐商发布tab点击切换发布表单参数没有切换

最新推荐文章于 2024-09-12 17:49:29 发布
最新推荐文章于 2024-09-12 17:49:29 发布
阅读量116 收藏
点赞数 1
分类专栏： 经验分享 文章标签： 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012381782/article/details/110678834
版权

商铺信息与添加客户是一个顶部tab 它里面的标签都是在view容器里面的。

例如发布表单

{
    "type":"view",
    "style":"view.DefaultViewLogic",
    "name":null,
    "isGrayBg":false,
    "showWaterImg":false,
    "tags":[
        {
            "type":"tag",
            "style":"tag.AppGeneralFormTagLogic",
            "name":null,
            "linearLayout":"body",
            "data":{
                "htmlObj":[
                    {
                        "compare":false,
                        "formType":"hintText",
                        "showValue":"客户购买你的信息可得全部业绩，别人成交了你的信息可获得20%业绩",
                        "canEqual":false,
                        "checkAll":false,
                        "expression":true,
                        "hidden":false,
                        "background":"min-height: 2.25rem;background: rgba(39, 196, 152, 0.05);border-radius: 1.25rem;margin-top:1rem;min-width: 17.31rem;width: fit-content;",
                        "leftIcon":".../png",
                        "tips":"说明"
                    },
                    {
                        "compare":false,
                        "formType":"releaseTypeWidget",
                        "canEqual":false,
                        "checkAll":false,
                        "expression":true,
                        "hidden":false,
                        "formKey":"plugin_id",
                        "itemList":[
                            {
                                "dataStr":false,
                                "isScript":false,
                                "index":"1",
                                "isArray":true,
                                "check":true,
                                "isDisabled":false,
                                "label":"商铺转让",
                                "tempCheck":"true",
                                "isMajorPic":false,
                                "value":"1"
                            },
                            {
                                "dataStr":false,
                                "isScript":false,
                                "index":"1",
                                "isArray":true,
                                "check":false,
                                "isDisabled":false,
                                "label":"商铺出租",
                                "tempCheck":"false",
                                "isMajorPic":false,
                                "value":"2"
                            },
                            {
                                "dataStr":false,
                                "isScript":false,
                                "index":"1",
                                "isArray":true,
                                "check":false,
                                "isDisabled":false,
                                "label":"商铺出售",
                                "tempCheck":"false",
                                "isMajorPic":false,
                                "value":"13"
                            },
                            {
                                "dataStr":false,
                                "isScript":false,
                                "index":"2",
                                "isArray":true,
                                "check":false,
                                "isDisabled":false,
                                "label":"写字楼出租",
                                "tempCheck":"false",
                                "isMajorPic":false,
                                "value":"18"
                            },
                            {
                                "dataStr":false,
                                "isScript":false,
                                "index":"2",
                                "isArray":true,
                                "check":false,
                                "isDisabled":false,
                                "label":"写字楼出售",
                                "tempCheck":"false",
                                "isMajorPic":false,
                                "value":"19"
                            }
                        ],
                        "rules":[
                            {
                                "name":"required",
                                "message":"请选择发布类型",
                                "value":"true"
                            }
                        ],
                        "label":"发布类型",
                        "value":"1"
                    },
                    {
                        "compare":false,
                        "formType":"textInput",
                        "canEqual":false,
                        "checkAll":false,
                        "expression":true,
                        "hidden":false,
                        "formKey":"mobile",
                        "rules":[
                            {
                                "name":"pattern",
                                "message":"请输入正确的手机号码",
                                "value":"[1][3,4,5,6,7,8,9][0-9]{9}"
                            },
                            {
                                "name":"required",
                                "message":"请输入手机号码",
                                "value":"true"
                            }
                        ],
                        "textType":"number",
                        "endIcon":"release_icon_contact@3x.png",
                        "value":"",
                        "maxLength":11,
                        "placeHolder":"请填写客户号码"
                    }
                ]
            },
            "paramName":"isJsonArray"
        },
        {
            "type":"tag",
            "style":"tag.AppGeneralButtonTagLogic",
            "name":null,
            "linearLayout":"body",
            "cssStyle":"text-align:center;padding-top:1.5rem",
            "data":[
                {
                    "cssColor":"yellow",
                    "round":"true",
                    "size":"small",
                    "submit":{
                        "id":"publish",
                        "content":{
                            "isJsonArray":""
                        }
                    },
                    "plain":"",
                    "cssStyle":"width:12.5rem;height:3.06rem;border-radius:1.53rem",
                    "action":"submit",
                    "disabled":"",
                    "label":"下一步",
                    "paramName":"isJsonArray"
                }
            ]
        }
    ]
}

这个view里面有一个表单，如果切换到添加客户

表单里面的内容则会发生变化：

{
    "type":"view",
    "style":"view.DefaultViewLogic",
    "name":null,
    "isGrayBg":false,
    "showWaterImg":false,
    "tags":[
        {
            "type":"tag",
            "style":"tag.AppGeneralFormTagLogic",
            "name":null,
            "linearLayout":"body",
            "data":{
                "htmlObj":[
                    {
                        "compare":false,
                        "formType":"hintText",
                        "showValue":"客户购买你的信息可得全部业绩，别人成交了你的信息可获得20%业绩",
                        "canEqual":false,
                        "checkAll":false,
                        "expression":true,
                        "hidden":false,
                        "background":"min-height: 2.25rem;background: rgba(39, 196, 152, 0.05);border-radius: 1.25rem;margin-top:1rem;min-width: 17.31rem;width: fit-content;",
                        "leftIcon":".../png",
                        "tips":"说明"
                    },
                    {
                        "compare":false,
                        "formType":"releaseTypeWidget",
                        "canEqual":false,
                        "checkAll":false,
                        "expression":true,
                        "hidden":false,
                        "formKey":"plugin_id",
                        "itemList":[
                            {
                                "dataStr":false,
                                "isScript":false,
                                "index":"1",
                                "isArray":true,
                                "check":true,
                                "isDisabled":false,
                                "label":"找店",
                                "tempCheck":"true",
                                "isMajorPic":false,
                                "value":"3"
                            }
                        ],
                        "rules":[
                            {
                                "name":"required",
                                "message":"请选择发布类型",
                                "value":"true"
                            }
                        ],
                        "label":"发布类型",
                        "value":"3"
                    },
                    {
                        "compare":false,
                        "formType":"textInput",
                        "canEqual":false,
                        "checkAll":false,
                        "expression":true,
                        "hidden":false,
                        "formKey":"mobile",
                        "rules":[
                            {
                                "name":"pattern",
                                "message":"请输入正确的手机号码",
                                "value":"[1][3,4,5,6,7,8,9][0-9]{9}"
                            },
                            {
                                "name":"required",
                                "message":"请输入手机号码",
                                "value":"true"
                            }
                        ],
                        "textType":"number",
                        "endIcon":"release_icon_contact@3x.png",
                        "value":"",
                        "maxLength":20,
                        "placeHolder":"请填写客户号码"
                    }
                ]
            },
            "paramName":"isJsonArray"
        },
        {
            "type":"tag",
            "style":"tag.AppGeneralButtonTagLogic",
            "name":null,
            "linearLayout":"body",
            "cssStyle":"text-align:center;padding-top:1.5rem",
            "data":[
                {
                    "cssColor":"yellow",
                    "round":"true",
                    "size":"small",
                    "submit":{
                        "id":"publish2",
                        "content":{
                            "isJsonArray":""
                        }
                    },
                    "plain":"",
                    "cssStyle":"width:12.5rem;height:3.06rem;border-radius:1.53rem",
                    "action":"submit",
                    "disabled":"",
                    "label":"下一步",
                    "paramName":"isJsonArray"
                }
            ]
        }
    ]
}

但是表单需要初始化所以我们在表单切换事件中处理表单切换，注意不能用reset来重置表单因为那样原来的控件都清空了，最好是使用删除表单

 async segmentChanged(e: any) {
    const index = e.detail.value;
    const segmentButton = this.segment.nativeElement.children[index];
    segmentButton.scrollIntoView({
      behavior: "smooth",
      inline: "center",
      block: "nearest",
    });
    if (this.tagData.data) {
      this.tagData.currentTab = index;
      // 删除表单信息
      this.http.post(
        "application/part",
        {
          viewId: this.tagData.data[index].partLink.target,
          sessionId: localStorage.getItem("sessionId"),
          params: this.tagData.data[index].partLink.params,
        },
        (res: any) => {
          // #616 修改：点击转让服务和选址服务跳到第一屏的画面
          this.content.scrollToTop(0);
          if (res !== undefined && res != null) {
            const switchData = JSON.parse(res.script);
            if (switchData.tags.length > 0 && switchData.tags[0].style === 'tag.AppGeneralFormTagLogic') {
              const paramName = switchData.tags[0].paramName;
              // 如果包含 tag.AppGeneralFormTagLogic 则清除 form表单
              this.appGlobalService.delFormGroupWithParamName(paramName);
            }
            setTimeout(() => {
              this.tagData.currentData = switchData;
              localStorage.setItem(
                "refreshGrayBgTag",
                "" + this.tagData.currentData.isGrayBg
              );
              this.eventService.eventEmit.emit(
                "refreshGrayBg",
                "refreshGrayBg"
              );
              localStorage.setItem(
                "dataMapTopTabContainer",
                JSON.stringify(this.tagData)
              );
              this.eventService.eventEmit.emit(
                "refreshTopTabContainer",
                "refreshTopTabContainer"
              );
            }, 50);


          }
        }
      );
      // }
    }
  }

 

AndrewWen099
关注
专栏目录
Vue实现tab切换 表单验证及提交
T_Struggle的博客
10-21 2511
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue form</title> <script src="../../js/vue.min.js"></script> <style type="text/css"> li {list-style: none} .nav li {float: left;b...
vue+elementui tab切换丢失参数
weixin_48271592的博客
06-30 3119
vue+elementui列表跳详情后，点其他菜单进行tab切换丢失详情页参数
taro 框架封装tab栏组件(其他组件类似)
weixin_45502106的博客
03-16 1797
import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import './tabs.scss' interface IProps { tabList: Array<{ title: string, active?: boolean }>,...
flutter多个输入表单可以点击tab进行切换
飞翔的熊blabla
01-05 1073
RawKeyboardListener( autofocus: true, onKey: (event) { if (event.runtimeType == RawKeyDownEvent) { if (event.physicalKey == PhysicalKeyboardKey.enter) { this.onClick('onClickLogin', null); } .
使用vue简单实现tab选项卡切换效果分享
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-27 1144
<style scoped> .menu{ display: flex; align-items: center; } .menu span{ color: #444950; font-size: 12px; line-height: 24px; background: #f5f6f7; padding: 0 6px; display: block; cursor: pointer; } .sho
vue中tab切换前端实现_vue 实现tab切换保持数据状态
weixin_35492662的博客
01-12 4130
网页做tab切换，由于组件每一次切换都会重新版实例化组件，我们想要网页不论如何切换都仍然保持tab里面的内容不会刷新版，减少网页重新版渲染以及减少请求实现方法：使用包裹组件列表网页跳转详情 ，列表网页保持上一次操作状态通过是否加载router-view 和路由元meta设置网页是否需要缓存来实现router-view嵌套多层的话，可能要设置多层，然后通过beforeRouteLeave监听路由离开...
HTML中tab表单的切换
忆晨的博客
05-16 1274
效果图 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h2{ border:1px solid blue; width: 100px; height: 35px; float: left; text-align:
【vue】自定义tab点击左右箭头可切换
l_XIANA的博客
04-23 2261
tab走马灯左右箭头点击切换
js利用tab键切换当前页面_javascript实现tab切换的四种方法
weixin_39740283的博客
12-20 1406
tab切换在网页中很常见，故最近总结了4种实现方法。首先，写出tab的框架，加上最简单的样式，代码如下：*{padding: 0;margin: 0;}li{list-style: none;float:left;}#tabCon{clear: both;}标题一标题二标题三标题四内容一内容二内容三内容四现在的显示效果如下图：四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即...
如何控制表单内tab键切换的顺序
我的博客
06-19 4969
在Html代码中有一个键盘属性——tabindex，它可以设置访问者在页面中按tab键的顺序。如下：<input type="button" id="b1" tabIndex="1" value="Button1" /> <input type="button" id="b2" tabIndex="2" value="Button2" /> <input type="button" id="b3"
laravel-admin：form表单tab标签切换组件.rar
03-01
该组件仿造laravel-admin form表单自带的tab组件。...区别在于laravel-admin自带的tab标签切换组件只能出现form表单的顶部所有的输入只能在tab标签内； 而该组件允许tab标签切换在form表单的任何位置，与代码顺序相关。
js实现鼠标单击Tab表单切换效果
10-18
在现代网页设计中，实现鼠标单击Tab表单切换效果是一种常见的用户交互方式，可以让用户在不同部分的内容之间切换查看，而无需加载新页面。本文将详细介绍使用JavaScript（js）来实现这一效果，并提供相应的HTML、CSS...
紫色风格登录注册表单tab切换页面模板
07-13
- Tab切换通常通过JavaScript实现，当用户点击某个tab时，触发事件处理函数，切换显示相应的表单区域。 - 可能有验证功能，例如检查输入是否为空或格式是否正确，这些可以通过JavaScript的正则表达式完成。 - ...
vue 实现tab切换保持数据状态
10-15
在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。 首先，让...
表单切换tab
11-27
Tab切换功能使得用户可以通过点击不同的标签或者滚动鼠标来轻松访问和切换不同的内容区域，极大地提升了用户体验。本教程将深入探讨如何利用jQuery插件实现这样的功能。 首先，jQuery是一个轻量级、高性能的...
打造高效实时数仓，从Hive到OceanBase的经验分享
OceanBase分布式数据库的博客
09-12 923
鉴于初期采用的数据仓库方案面临高延迟、低效率等挑战，我们踏上了探索新数仓解决方案的征途。本文分享了我们从Hive到OceanBase的方案筛选与实施过程中的经验总结，期望能为您提供有价值的参考与启示。
_Command_line_settings_desktop_wallpaper_tool,_Su_command-wallpa
最新发布
09-17
_Command_line_settings_desktop_wallpaper_tool,_Su_command-wallpaper
IMG_20240917_151703.jpg
09-17
IMG_20240917_151703.jpg
吉他谱_Pneuma - Tool.pdf
09-17
初级入门吉他谱 guitar tab
用vue加element ui写一个tab切换的表格加表单页面
05-24
好的，下面是一个简单的示例代码： ```html <template> <div> <el-tabs v-model="activeTab"> <el-tab-pane label="表格"> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="表单"> <el-form ref="form" :model="formData" :rules="rules" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="formData.age"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="formData.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeTab: '表格', tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' }, ], formData: { name: '', age: '', gender: '', }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }, { validator: this.checkAge, trigger: 'blur' }, ], gender: [ { required: true, message: '请选择性别', trigger: 'change' }, ], }, }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('表单验证通过'); } else { console.log('表单验证失败'); } }); }, resetForm() { this.$refs.form.resetFields(); }, checkAge(rule, value, callback) { if (value < 18 || value > 60) { callback(new Error('年龄必须在18岁到60岁之间')); } else { callback(); } }, }, }; </script> ``` 在这个示例中，我们使用了 Element UI 提供的 `el-tabs` 和 `el-tab-pane` 组件来实现标签页切换功能。在第一个标签页中，我们使用了 `el-table` 和 `el-table-column` 组件来展示表格数据；在第二个标签页中，我们使用了 `el-form`、`el-form-item`、`el-input` 和 `el-radio-group` 组件来实现表单功能。同时，在表单中我们还使用了 Element UI 提供的表单验证功能，通过 `rules` 属性来设置表单验证规则。在表单验证通过后，我们可以将表单数据提交到后端进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值