帆软决策报表JS实现点击超链切换TAB页

1. 描述编辑

客户想通过对报表块单元格的点击实现tab标题的切换:

222

 

2. 思路编辑

 

通过单元格超级链接-JavaScript脚本实现tab切换:

  1. this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index); //切换显示tab  

参考文档:TAB布局

3. 操作步骤编辑

3.1 新建决策报表

拖入一个报表块和tab块,添加三个tab标题,模板如下:

222

3.2 设置超链接

右击A2单元格,添加超级链接-JavaScript脚本:

222

js代码如下:

  1. _g().options.form.getWidgetByName("tabpane0").showCardByIndex(0);  

注:tabpane0是指整个tabpane0对象,Index是指的索引,从0开始。

同理A3、A4单元格也要添加超级链接-JavaScript脚本,将js代码中的index修改为对应的索引即可。

A3单元格对应的js为:_g().options.form.getWidgetByName("tabpane0").showCardByIndex(1);

A4单元格对应的js为:_g().options.form.getWidgetByName("tabpane0").showCardByIndex(2);

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Vue的tab切换,你可以按照以下步骤进行: 1. 在Vue中使用Vue Router来管理路由。首先需要在Vue项目中安装Vue Router,然后在main.js中引入并使用Vue Router。 2. 在Vue Router中设置多个路由,每个路由对应一个面。你可以将这些路由设置为子路由,这样每个路由都可以通过某个父路由来访问。 3. 在Vue中创建一个组件来显示tab导航栏,这个导航栏需要包含多个选项卡,每个选项卡对应一个路由。 4. 在Vue中创建多个组件,每个组件对应一个路由所对应的面。 5. 在Vue中通过路由跳转来实现面的切换。当你点击tab导航栏中的某个选项卡时,Vue Router会根据路由配置自动跳转到对应的面组件。 6. 可以通过一些样式效果来美化tab导航栏,比如选中的选项卡可以高亮显示。 下面是一个示例代码,用来实现Vue的tab切换: ``` // main.js import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import Home from './components/Home.vue' import About from './components/About.vue' import Contact from './components/Contact.vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] }) new Vue({ router, render: h => h(App) }).$mount('#app') // App.vue <template> <div> <div class="tabs"> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> </div> <router-view></router-view> </div> </template> // Home.vue <template> <div> <h1>Home Page</h1> <p>Welcome to the home page!</p> </div> </template> // About.vue <template> <div> <h1>About Page</h1> <p>Learn more about us!</p> </div> </template> // Contact.vue <template> <div> <h1>Contact Page</h1> <p>Get in touch with us!</p> </div> </template> // style.css .tabs { display: flex; justify-content: space-around; margin-bottom: 20px; } .tabs a { padding: 10px; border: 1px solid #ccc; } .tabs a.router-link-active { background-color: #ccc; } ``` 在上面的代码中,我们首先在main.js中引入并使用了Vue Router,并设置了三个路由:'/','/about'和'/contact'。然后在App.vue中创建了一个tab导航栏,包含了三个选项卡,每个选项卡对应一个路由。最后在Home.vue、About.vue和Contact.vue中分别定义了三个面组件。当你点击tab导航栏中的某个选项卡时,Vue Router会自动跳转到对应的面组件。 你可以根据自己的需要,对上面的示例代码进行修改和调整,来满足自己的实际需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值