vue根据不同内容显示不同的内容/span标签重合问题

最新推荐文章于 2024-04-19 15:18:46 发布

一抹清风似少年

最新推荐文章于 2024-04-19 15:18:46 发布

阅读量1.5k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_30815659/article/details/122195429

版权

比如

 </el-table-column>
        <el-table-column
      label="状态"
      width="180">
    <template slot-scope="scope">
    <!-- <el-tag :type="isStatus(scope.row.status)"  >{{scope.row.status}}</el-tag> -->
    <span v-if="scope.row.status==0" >
      <div class="status-icon icon1"></div>  在线
      
    </span>
        <span v-if="scope.row.status==1">
      <div class="status-icon icon0"></div>未在线
    </span>
     </template>
    </el-table-column>

1=》启动

.status-icon {
          width: 8px;
          height: 8px;
          top:28px;
          border-radius: 1px;
          margin-right: 5px;
          position:absolute;
          left: 0px;
          bottom: -15px;
          float:left;
        }
 .icon1 {
          background-color: #19be6b;
        }
 .icon0 {
          background-color: #eb194d;
        }

float:left;保证了不会重合；