element-ui表格状态

最新推荐文章于 2023-09-05 17:23:33 发布

Scarlett_Hao

最新推荐文章于 2023-09-05 17:23:33 发布

阅读量270

点赞数

文章标签： ui css html

本文链接：https://blog.csdn.net/weixin_57541715/article/details/130488949

版权

模版

<el-table-column
                    prop="status"
                    label="干预状态"
                    width="150"
                >
                <template slot-scope="{row}">
                      <div :style="statusStyle(row.status)" class="statusBorder">
                          <span :class="statusClass(row.status)">
                              {{ getStatusName(row.status) }}
                          </span>
                      </div>
                 </template>
                    <!-- <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.status === 100 ? 'warning' : scope.row.status === 200 ? 'success' :
                                scope.row.status === 300 ? 'info' : scope.row.status === 400 ? '' : 'danger'"
                            disable-transitions
                        >{{
                            scope.row.status === 100 ? '等待上线' : scope.row.status === 200 ? '上线成功' :
                                scope.row.status === 300 ? '已下线' : scope.row.status === 400 ? '已删除' : '上线失败'
                        }}</el-tag>
                    </template> -->
                    
                </el-table-column>

方法

        // statusClass(status) {
        //     if (status === '上线成功') {
        //         return 'status-good';
        //     }
        //     else if (status === '已下线') {
        //         return 'status-bad';
        //     }
        //     else if (status === '上线失败') {
        //         return 'status-warn';
        //     }
        //     else if (status === '待上线') {
        //         return 'status-info';
        //     }
        // },
        // statusStyle(status) {
        //     if (status === '上线成功') {
        //         return {backgroundColor: '#f0f9eb'};
        //     }
        //     else if (status === '已下线') {
        //         return {backgroundColor: '#fef0f0'};
        //     }
        //     else if (status === '上线失败') {
        //         return {backgroundColor: '#fff7e6'};
        //     }
        //     else if (status === '待上线') {
        //         return {backgroundColor: '#e6f7ff'};
        //     }
        // },

样式

.status-good {
    color: green;
    font-weight: bold;
}

.status-bad {
    color: red;
    font-weight: bold;
}

.status-warn {
    color: orange;
    font-weight: bold;
}

.status-info {
    color: blue;
    font-weight: bold;
}
 .statusBorder {
 border: 1px solid red;
 width: 20px;
 height: 10px;
}