最近项目的原型设计中有这样一个需求，在表格中插入一个步骤条，先贴一张完成的图片，效果如下：
开始做的时候，查看了一下element官方文档（传送门：Element官方文档），官方文档中只有一些比较基本的样式，例如：描述的步骤条、带图标的步骤条等，这里就不一一赘述了。
首先，在表格中加入插槽，插入步骤条组件
<el-table-column prop="orderStatus" label="进度状态" align="center">
<template slot-scope="scope">
<el-steps :active="scope.row.orderStatus">
<el-step
v-for="(value, key) in milepost"
:class="stepStyle(key,scope.row.orderStatus)"
:title="value.title"
:key="key"
></el-step>
</el-steps>
</template>
</el-table-column>
milepost: [
{ title: " 提交申请 " },
{ title: " 审批申请 " },
{ title: " 流程审核 " },
{ title: " 审核成功 " },
{ title: "未进行" },
{ title: "进行中" },
{ title: "已完成" },
{ title: " 整体评价 " }
]
使用表格的cellStyle属性，设置步骤条一列对齐方式为左
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 6 || columnIndex === 7) {
return "text-align:left";
} else {
// return "line-height:50px";
}
},
在步骤条组件上绑定class，根据当前列中步骤条进度分别给“已完成”、“进行中”、“未开始”三种状态的步骤条赋上对应的类样式，js方法如下：
stepStyle(key, orderStatus) {
// 动态添加类名
if (key == orderStatus) {
return "stepActive";
} else if (key < orderStatus) {
return "stepSuccess";
} else if (key > orderStatus) {
return "stepWait";
}
}
css样式如下，切记修改element组件原样式的时候需要建立一个style标签，去掉scoped，并在element组件外层用一个父元素包含起来，缺前者设置会不生效，缺后者会影响全局样式。
.table-style {
.el-step.is-horizontal.stepActive {
.el-step__head.is-process {
.el-step__line {
height: 4px;
width: 100% !important;
background-color: rgba(71, 117, 183, 0.8);
// 当前步骤数横线样式设置
.el-step__line-inner {
width: 0px !important;
}
}
// 当前步骤数圆圈样式设置
.el-step__icon.is-text {
width: 15px;
height: 15px;
background-color: rgb(71, 117, 183);
color: rgba(71, 117, 183, 0);
border-color: rgb(71, 117, 183);
}
}
.el-step__main {
.el-step__title.is-process {
color: #1d53a0;
font-size: 14px;
font-weight: 400;
text-align: center;
}
}
}
.el-step.is-horizontal.stepSuccess {
.el-step__head.is-finish {
.el-step__line {
height: 4px;
width: 100% !important;
background-color: rgb(190, 212, 243);
// 已完成步骤数横线样式设置
.el-step__line-inner {
width: 0px !important;
}
}
// 已完成步骤数圆圈样式设置
.el-step__icon.is-text {
width: 10px;
height: 10px;
background-color: rgb(190, 212, 243);
color: rgba(71, 117, 183, 0);
border-color: rgb(190, 212, 243);
}
}
.el-step__main {
.el-step__title.is-finish {
color: #d5d5d5;
font-size: 14px;
font-weight: 400;
text-align: center;
}
}
}
.el-step.is-horizontal.stepWait {
.el-step__head.is-wait {
.el-step__line {
height: 4px;
width: 100% !important;
background-color: rgb(71, 117, 183);
// 未开始步骤数横线样式设置
.el-step__line-inner {
width: 0px !important;
}
}
// 未开始步骤数圆圈样式设置
.el-step__icon.is-text {
width: 10px;
height: 10px;
background-color: rgb(71, 117, 183);
color: rgba(71, 117, 183, 0);
border-color: rgb(71, 117, 183);
}
}
.el-step__main {
.el-step__title.is-wait {
color: #8d8d8e;
font-size: 14px;
font-weight: 400;
text-align: center;
}
}
}
.el-step.is-horizontal .el-step__line {
height: 4px;
width: 100%;
top: 25px;
left: 40%;
}
.el-step__icon {
top: -13px;
left: 40%;
}
.el-step__head {
height: 35px !important;
}
}
这里我是将步骤条原样式中的数字颜色改成透明，分别设置三种状态的圆圈大小及背景色，然后用.el-step__icon类设置定位，用 .el-step.is-horizontal .el-step__line设置步骤条横线的粗细及位置，根据具体表格的对应列宽高来设置就好啦。
