<ul>
      <li v-for="(list,index) in TabList" :key="index" class="box" :style="{color:list.color}">
        <span>{{list.name}}</span>
        <span>{{list.sex}}</span>
        <span>{{list.invoice}}</span>
        <span>{{list.age}}</span>
      </li>
    </ul>

   methods: {
      getlist() {
        var arr = this.TabList;
        var newArr =[]
        var color =[]
        for(var i=0;i<arr.length;i++){
          newArr.push(arr[i].invoice)
          // 去重
          newArr = Array.from(new Set(newArr))
        }
        for(var j=0;j<newArr.length;j++){
        //生成對應(yīng)數(shù)量的顏色 隨機色不好看 如果數(shù)據(jù)重復(fù)量小 可以自己寫一組顏色用 夠用就行## 標(biāo)題
          color.push(this.getColor())
          for(var k=0;k<arr.length;k++){
            if(newArr[j] === arr[k].invoice){
              arr[k].color = color[j]
            }
          }
        }
      },
      getColor(){
        //16進(jìn)制隨機數(shù)生成 顏色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
        return color;
      }
    },
    mounted() {
      this.getlist();
    }