Vue3 dynamic classes-CodePudding

I want to give dynamic or different classes to different rows of an element plus table. Basically, I want to give different colors to each row. I want to iterate an array that has colors in it for example

const colors = ["blue","yellow","black"]

I have tried binding this to my row like this:

<el-table-column prop="owner">
          <template #header>
            <span >所有者</span>
          </template>
          <template #default="scope">
            <div >
              <div :>
                {{ scope.row.owner.slice(0, 1) }}
              </div>
              <div>{{ scope.row.owner }}</div>
            </div>
          </template>
        </el-table-column>

But, it is not iterating through the array and gives only one class to all of the rows. This is the CSS for classes:

.blue {
  background-color: rgb(125, 125, 216);
}
.yellow {
  background-color: rgb(164, 164, 71);
}
.black {
  background-color: black;
}

Hope this explains my question, should I attach the full code for reference?

CodePudding user response：

You could choose one color based on the row index mod 3 :

<div :>