el-tab-pane切换组件，通过el-badge右上方显示数量

先看效果，需求做一个切换栏，并且切换栏的右上方显示数字，无数据显示0（现在为mock数据并不是真实数据，所以显示为0）

这个是真实数据通过条数，显示数量

常规的切换栏不需要显示数字很简单 ，通过name不同值进行切换传参，后台就可以通过传的不同name去返回对应的数据

   <el-tabs v-model="type" class="demo-tabs" @tab-change="resetQuery">
        <el-tab-pane label="A" name="00" />
        <el-tab-pane label="B" name="01" />
        <el-tab-pane label="C" name="02" />
        <el-tab-pane label="D" name="03" />
        <el-tab-pane label="E" name="04" />
      </el-tabs>



    /* 初始值，就是tab初始底部横线显示的位置，为默认数据 */
    const type = $ref('0')

    /* 表单绑定的ref */
    const queryRef = $ref<FormRef>(null)

    /** 搜索按钮操作 */
    function handleQuery() {
      queryParams.pageNum = 1
      getList()
    }

    /** 重置按钮操作 */
    function resetQuery() {
      queryRef?.resetFields()
      handleQuery()
    }

如果显示数量就需要使用插槽和el-badge 组件，并且通过computed计算属性计算是否有值，zeroNumber为下方script定义的计算属性

        <el-tab-pane name="00">
          <template #label>
            <span> A
              <el-badge :value="zeroNumber" />
            </span>
          </template>
        </el-tab-pane>

 

const zeroNumber = computed({
  get: () => {
    const temp = org?.find((e: any) => e.type === '00')

    if (temp)
      return temp.warningCountNumber

    return 0
  },
  set: (newValue) => {
    org.warningCountNumber = newValue
  },
})