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

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

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

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

使用表格的cellStyle属性，设置步骤条一列对齐方式为左

    在步骤条组件上绑定class，根据当前列中步骤条进度分别给“已完成”、“进行中”、“未开始”三种状态的步骤条赋上对应的类样式，js方法如下：

css样式如下， 切记修改element组件原样式的时候需要建立一个style标签，去掉scoped，并在element组件外层用一个父元素包含起来，缺前者设置会不生效，缺后者会影响全局样式。

这里我是将步骤条原样式中的数字颜色改成透明，分别设置三种状态的圆圈大小及背景色，然后用.el-step__icon类设置定位，用 .el-step.is-horizontal .el-step__line设置步骤条横线的粗细及位置，根据具体表格的对应列宽高来设置就好啦。

1.分析需求

当用户输入为空提交时，出现底部提示，输入框变为醒目的红色

2.具体 *** 作

首先在hello.vue文件下,绑定具体的字段让父组件监听，动态调节，具体字段仅添加一下几个，还可自行根据需求拓展

1.如图所示 在文件下我新建了el-input 输入框，通过show判断是否为空，为空时改变其border-color，不为空则正常边框颜色，type为其类型可选number，text....   ，max，min为用户可输入最大最小字段,size 可控制输入框的高度大小，errmessage为提示的字段，@blur为失去焦点触发的事件

如图二所示

在这里我通过props接收父组件传过来的参数，通过this.$emit将事件发布到父组件，把表单的绑定值作为实参传入

2.父组件通过import将组件引用，通过components将其引入如上几个字段就是传递给子组件的参数，这里就不细讲，当然这值可以通过v-bind动态绑定，在这里我绑定了show (通过输入框失去焦点，如果值为空将其设为true)以及err(提示的字段)，图三为具体的方法，父组件通过on订阅，通过子组件传进来的参数判断

应用 element 中的 table 组件，自定义表头 Tooltip 文字提示。

请点这里

在 main.js 中引入

在 src ->modules ->components ->messages 中增加 promptMessages 组件及 index.js 文件

promptMessages 组件

index.js 文件

在 utils 文件夹