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

大纲

📗 Avue具体方法如下：

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

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

 📗 ElementUi具体方法如下：

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

---

 示例：

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="处理中" name="1"></el-tab-pane>
      <el-tab-pane label="审核" name="2"></el-tab-pane>
      <el-tab-pane label="完成" name="3"></el-tab-pane>
    </el-tabs>
    <avue-crud :option="option" :data="data" :page="page" v-model="form" ref="crud"
      @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel" >
    </avue-crud>
  </div>
</template>

<script>
  import API from "@/components/common/newApi";
  export default {
    data() {
      return {
        /* data:[]后端获取到的数据列表。option表格配置项.form 表单*/
        data: [], //处理中data
        form: {}, //处理中
        activeName: '1',
        status:3,
        option: {
          size: 'mini', //表格大小 medium/small/mini
          index: true, //序号
          border: true,
          menu: false,
          stripe: true, //斑马纹
          align: 'center',
          column: [{
            label: '月份',
            prop: 'yearToMonth',
            type: "datetime",
            format: 'yyyy-MM-DD ',
            valueFormat: 'yyyy-MM-DD ',
          }, {
            label: '姓名',
            prop: 'Name',
          }, {
            label: '联系电话',
            prop: 'phone',
          },{
            label: '费用名称',
            prop: 'feeName',
          }, {
            label: '人工工费',
            prop: 'costLabor',
            hide:true,
          }, {
            label: '人工工时',
            prop: 'manHourCost',
            hide:true,
          }, {
            label: '总收费',
            prop: 'costTotal',
            hide:true,
          }, {
            label: '状态',
            prop: 'scheduleStatus',
            type: 'select',
            dicData: [{label:'处理中',value:1},{label:'审核',value:2},{label:'完成',value:3},]
          }, ]
        },
      }
    },
    mounted() {
      this.onLoad()
    },
    methods: {
      // 根据接口获取data数据
      onLoad(status = 1) {
        let param = {
          data: {
            scheduleStatus: status
          },
          pageNum: this.page.pageNo,
          pageSize: this.page.pageSize,
        }
        API.otherCostInfo(param).then(res => {
          if (res.data.code == 0) {
            this.data = res.data.data.list
          }
        });
      },
      // 新增数据保存
      rowSave(form, done, loading) {},
      // 编辑该条数据保存 form 编辑表单数据， index 编辑数据的检索值
      rowUpdate(form, index, done) {},
      // 删除
      rowDel(val) {},
      //标签选择点击事件
      handleClick(tab) {
        console.log('tab',tab)
        this.status = tab.name
        //判断是否是完成状态 是，就展示 工费和工时，不是就隐藏
        if(this.status == 3){
          this.option.column[4].hide = false
          this.option.column[5].hide = false
          this.option.column[6].hide = false
        }else{
          this.option.column[4].hide = true
          this.option.column[5].hide = true
          this.option.column[6].hide = true
        }
       
        this.onLoad(this.status)
      },

    }
  }
</script>

<style>
</style>

 效果展示：

---

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

---

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