element 表格 进度条

 表格

<el-table height="196" border :data="tableData" style="width: 100%"
									:row-class-name="tableRowClassName">
									<el-table-column type="index" label="序号">
									</el-table-column>
									<el-table-column prop="work_plan_slide_no" label="生产令号">
									</el-table-column>
									<el-table-column prop="fix_type" label="维修类型">
									</el-table-column>
									<el-table-column prop="plan_begin_time" label="计划上线时间">
									</el-table-column>
									<el-table-column prop="plan_end_time" label="计划下线时间">
									</el-table-column>
									<el-table-column prop="warning_light" label="执行状态">
										<template slot-scope="scope">
											<div class="progressContainer"
												v-bind:style="{'background':alarml(scope.row.warning_light,scope.$index).bg,'width':'100%',}">
												<div class="progress display align-items-center justify-content-center">
													<div class="display align-items-center justify-content-center">
														<img style="width:20px;height:18px;"
															:src="alarml(scope.row.warning_light,scope.$index).img" />
													</div>
													<div class="m-l-10" style="color: #FFFFFF !important; ">
														{{alarml(scope.row.warning_light,scope.$index).textshow}}</div>
												</div>
											</div>
										</template>
									</el-table-column>
									<el-table-column v-for="(item,index) in tabList" :key="index" :label="item.lable">
										<el-table-column v-for="(Son,SonIndnx) in item.SonList" :key="SonIndnx"
											:prop="Son.prop" :label="Son.lable" width="50%">
											<template slot-scope="scope">
												<div class="progressContainer " >
													<div v-bind:style="{'background':kanOneBgPro(scope.row,scope.$index,Son.prop).bg,'width':kanOneBgPro(scope.row,scope.$index,Son.prop).w+'%'}" class="progress display fonst-size-12 align-items-center justify-content-center">
														<div :style="{'color':scope.row[Son.prop]=='待修理'?'#CE5B0F':''}" class="progress-color">{{kanOneBgPro(scope.row,scope.$index,Son.prop).textshow}}</div>
													</div>
												</div>
											</template>
										</el-table-column>
									</el-table-column>
								</el-table>

 进度条样式

.progressContainer {
	height: 100%;
	width: 100%;
	position: relative;

}

.progress {
	height: 30px;
	line-height: 30px;
}

.progress-color {
	color: #fff;
	font-weight: 100;
	font-size: 12px;
	position: absolute;
	width: 100%;
	left: 0px;

}

js  部分

kanOneBgPro(row, index, prop) {
			let status = null;
			if (isNaN(row[prop])) {
				status = row[prop]
			} else {
				status = Number(row[prop]) / 10;
			}

			console.log('dddd',status)
			let bg = null;
			let w = null;
			let textshow = null;
			switch (status) {
				case 1:
					bg = 'rgba(255, 39, 39, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 2:
					bg = 'rgba(250, 129, 0, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 3:
					bg = 'rgba(250, 129, 0, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 4:
					bg = 'rgba(250, 129, 0, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 5:
					bg = 'rgba(250, 129, 0, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 6:
					bg = 'rgba(254, 223, 0, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 7:
					bg = 'rgba(66, 177, 255, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 8:
					bg = 'rgba(66, 177, 255, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 9:
					bg = 'rgba(66, 177, 255, 0.6)';
					w = row[prop];
					textshow = row[prop] + '%'
					break;
				case 10:
					if ((index + 1) % 2 === 0) {
						bg = '#1f9974';
					} else {
						bg = '#1d975c';
					}
					w = row[prop];
					textshow = '√';
					break;
				case '待修理':
					bg = 'rgba(248, 233, 171, 0.9)';
					w = 100;
					textshow = row[prop];
					break;
			}

			return {
				bg,
				w,
				textshow
			}
		},