在Element表格中插入步骤条，并实现样式定制化

最近项目的原型设计中有这样一个需求，在表格中插入一个步骤条，先贴一张完成的图片，效果如下：

    开始做的时候，查看了一下element官方文档（传送门：Element官方文档），官方文档中只有一些比较基本的样式，例如：描述的步骤条、带图标的步骤条等，这里就不一一赘述了。

    首先，在表格中加入插槽，插入步骤条组件

       

     

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设置步骤条横线的粗细及位置，根据具体表格的对应列宽高来设置就好啦。