vue Element-Ui tabs+badge组合使用 并根据数量修改tabs的badge颜色

        项目中经常会使用到tabs标签页,该项目需求是在每一个tab右上角显示该页面数量,因为使用的是element-ui首先想到的就是是用badge(其实自己用css定位感觉也能写,嵌套也挺简单的哈)

 <el-tabs v-model="activeName" @tab-change="handleTableChange">
      <el-tab-pane v-for="item in list" :key="item.id" :name="item.name">
        <template #label>
          <el-badge :value="item.num || 0">{{ item.name }}</el-badge>
        </template>
      </el-tab-pane>
    </el-tabs>

        完事整了个需求,希望badge颜色能变变.

        好好好给整个随机生成呗

        围观文档看了一下,好像没有提到badge的颜色自定义设置,所以就用的document来写的

//方法调用挂在onMounted上了

function getcolor() {
  list.value.forEach((e, index) => {
    let r = Math.floor(Math.random() * 256) // 生成0-255之间的随机数
    let g = Math.floor(Math.random() * 256) // 生成0-255之间的随机数
    let b = Math.floor(Math.random() * 256) // 生成0-255之间的随机数
    document.getElementsByClassName('el-badge__content')[index].style.background =
      `rgb(${r},${g},${b})`
  })
}

        就这样婶的,每次刷新颜色都会变.

        完事呢,又希望颜色在统一的调调里面,按照数量多少决定颜色深浅

        好好好,那就先给排个序呗

        所以首先给list进行排序,为了不改变list的数据顺序,所以决定在list里添加一个参数order

        然后整上颜色

let colorMap = [] // 用于存储数字到颜色的映射
  let maxNum = Math.max(...tabs.value.map((item) => item.num)) // 获取数组中的最大数字
  let minNum = Math.min(...tabs.value.map((item) => item.num)) // 获取数组中的最小数字
  let color = Math.floor((255 - 100) / tabs.value.length) // 根据数字计算颜色值

  // 创建一个颜色映射对象
  for (let i = maxNum - minNum; i >= 0; i--) {
    colorMap[i] = `rgb(${(250 + i * color) * 0.8},${(120 + i * color) / 3},${
      (180 + i * color) / 4
    })` // 设置颜色值 红色设置的是这样婶的 这块随意写吧
  }

//遍历数组根据给定顺序设置背景颜色
list.value.forEach((item) => {
    document.getElementsByClassName('el-badge__content')[item.order].style.background =
      colorMap[item.order]
  })

        俺这个是按先后顺序排列的 凑合看哈~ 总之就是个从深到浅的背景板了