vue中动态添加类名

一：根据不同的内容，添加不同样式

使用v-if、v-else-if、 v-else

<el-table :data="tableData" :show-header="false" style="width: 100%">
       <el-table-column prop="state" width="30">
              <template slot-scope="{row}">
                    <div v-if="row.type === '超量下载文件'" class="state"></div>
                    <div v-else-if="row.type === '跨部门登录'" class="state"></div>
                     <div v-else class="stateGreen"></div>
             </template>
      </el-table-column>
 </el-table>

二：循环遍历内容，根据符合条件，添加样式

带有百分百进度条

<el-table
                  :data="userList.slice((pagesNum-1)*pageSize,pagesNum*pageSize)"
                  :show-header="false"
                  style="width: 100%"
                >
                  <el-table-column prop="id" width="70" text-align="center">
                    <!-- 循环遍历 -->
                    <template slot-scope="{row}">
                      <div
                        v-if="row.id>20"
                        style="background-color:#ed405d;width:40px;height:20px;color:white;border-radius:5px;line-height:20px;text-align:center"
                      >{{row.id}}</div>
                      <div
                        v-else-if="row.id>10"
                        style="background-color:#f78c44;width:40px;height:20px;color:white;border-radius:5px;line-height:20px;text-align:center"
                      >{{row.id}}</div>
                      <div
                        v-else
                        style="background-color:#878787;width:40px;height:20px;color:white;border-radius:5px;line-height:20px;text-align:center"
                      >{{row.id}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="hostName"></el-table-column>
                  <el-table-column prop="clientServerTTL">
                    <!-- 循环遍历显示百分百数值 -->
                    <template slot-scope="{row}">
                      <!-- 必填项percentage -->
                      <el-progress :percentage="row.id"></el-progress>
                    </template>
                  </el-table-column>
                </el-table>