vue 双层tab切换

tab用自定义model方式封装，两个tab都会给默认值从1开始

第一层tab切换时， 加上change事件，触发事件时给第二层tab赋值 1（这里是因为第一层tab切换，第二层tab也要从第1个开始），掉接口方法

第二层tab切换时， 加上change事件，触发事件时，掉接口方法，传入1 ，（这里是因为接口方法中如果传入值，则页码默认从1开始）这样第二层tab切换时，页码也是从1开始

第一层tab代码

<template>
  <div class="pagetable">
    <div class="item" @click="getValue(item.value)" v-for="item in option" :key="item.value" :class="value == item.value ? 'on' : '' ">
      {{item.label}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: ""
    },
    option: {
      default: () => []
    }
  },
  model: {
    prop: "value",
    event: 'getValue'
  },
  methods: {
    getValue (val) {
      this.$emit('getValue', val)
    }
  }
}
</script>

<style lang="less" scoped>
.pagetable {
  background: #ffff;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.item {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}
.on {
  background: skyblue;
  border-radius: 6px 6px 0 0;
  color: green;
}
</style>

第二层tab

<template>
  <div class="pagetable">
    <div class="item" @click="getValue(item.value)" v-for="item in option" :key="item.value" :class="value == item.value ? 'on' : '' ">
      {{item.label}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: ""
    },
    option: {
      default: () => []
    }
  },
  model: {
    prop: "value",
    event: 'getValue'
  },
  methods: {
    getValue (val) {
      this.$emit('getValue', val)
      this.$emit('change', val)
    }
  }
}
</script>

<style lang="less" scoped>
.pagetable {
  height: 40px;
  display: flex;
  border-bottom: 1px solid #dcdee6;
  margin-bottom: 20px;
  background: #fff;
  .item {
    height: 40px;
    line-height: 40px;
    margin-right: 50px;
    cursor: pointer;
    position: relative;
    &.on {
      color: #104fa7;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background: #104fa7;
      }
    }
  }
}
</style>

父页面，引入 2层tab组件

<template>
  <div class="box">
    <!-- 第一层tab -->
    <PageTable :option='pageList' v-model="search.costType" />
    <div class="search-bg">
      <SearchInput v-model="search.name" />
      <Searchage v-model="search.age" />
      <el-button type="primary" @click="btn(1)">查询</el-button>
    </div>
    <!-- 第二层tab -->
    <GoloTable @change="btn(1)" :option='tableList' v-model="search.bookingStatus" />
  </div>
</template>

<script>
const option = {
  costType: 1, // 第一层tab
  bookingStatus: 1, // 第二层tab
  name: '',
  age: '',
  num: '', // 页码
}
export default {
  data () {
    return {
      pageList, // 第一层数据
      tableList, // 第二层数据
      search: { // 查询条件
        ...option
      }
    }
  },
  // 刚进页面掉接口
  created () {
    this.btn()
  },
  watch: {
    // 监听第一层tab改变时，掉接口方法
    'search.costType': {
      deep: true,
      handler (val) {
        this.search.bookingStatus = 1
        // 掉接口方法
        this.btn(1)
      },
    },
  },
  methods: {
    // 接口方法
    btn (page) {
      // 页码从1 开始
      if (page) this.search.num = page
      const params = JSON.parse(JSON.stringify(this.search))
      console.log(params);
    }
  }
}
// 第一层tab 数据
const pageList = [
  {
    label: "组织性筛查",
    value: 1,
  },
  {
    label: "机会性筛查",
    value: 2,
  },
]
// 第二层tab 数据
const tableList = [
  {
    label: "待签到",
    value: 1,
  },
  {
    label: "已签到",
    value: 2,
  },
  {
    label: "已取消",
    value: 3,
  },
]
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
}
.search-bg {
  margin-top: 20px;
  padding-left: 20px;
  display: flex;
}
</style>