Vue中根据不同状态切换 Tabs 标签页内容

大纲

 Avue具体方法如下：

Tabs 组件用于包含多个标签页，每个标签页由 TabPane 组件表示。

v-model 可以控制当前激活的标签页（即默认展示出来的页面）。

  ElementUi具体方法如下：

 v-model ——  绑定值，选中选项卡name                                                                         name  ——  与选项卡绑定值 value 对应的标识符，表示选项卡别名

---

 示例：

 效果展示：

---

    点击标签页，可以先打印输出看一下tab里边都是些什么，我们可以看到有一个属性是name，而这个name中的值就是我们给选项卡定义的别名。然后我们定义一个全局变量state，让它默认为1，最后我们只需要根据tab.name获取到当前的状态值，根据状态值去执行你需要的操作即可。

---

   根据需求来设置不同标签页中展示的字段，例如上图，处理中 我不需要展示工费工时和总收费，故，我可以根据选中的状态值来设置字段的显隐。