Vue中的table表单切换实现效果_vue.js_

Vue表单切换实现效果

点击第一个链接 出现以下数据

点击第二个链接 ,我没有写后台所以没有数据, 可以自己写方法去获取数据复制给v-model 绑定的数组

首先给两个链接定义 一个num

点击第一个按钮时 设置num等于1 , 这样在table列表处定义 v-show ="num==1 ",当等于1 时 显示第一个table 当等于num 等于 2时 等于第二个table 这样就能实现 table 的转换

table代码在这里插入代码片

编辑   删除

Data处定义 num

num 默认值设定为1 这样默认就打开 第一个table 设置为0 就是都不打开

Vue table切换组件

如果vue单页开发没有使用ui组件，table切换的功能还是比较烦人的。闲暇时间看书写了一个table切换的组件，和大家分享一下，效果图如下：

主要有两个组件页面，第一个是  tabs.vue，这个页面上会循环出table标签和每个标签对应的内容，大部分的事件处理也在这个页面上。代码如下：

第二个组件页面是  pane.vue ，这个页面主要是渲染和控制标签所对应的内容。代码如下：

使用这两个页面就很简单了，在页面上引入这两个组件，如下：

页面上标签定义了一个初始值“activeKey”，这是页面初始时显示的内容，通常都是“1”，标签有个两个属性，一个是label，一个是name，主要是控制table标签主题的。每个table标签对应的内容直接写在标签里面就好了。组件虽然复杂了点，但是复用起来还是可以的。

页面的样式我是写在全局里面的（最后一个引入组件的页面），没有写在组件页面里面，使用的时候请多多注意

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！