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

JavaScript031

在Element表格中插入步骤条,并实现样式定制化,第1张

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

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

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

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

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

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

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

element,n.

要素基本部分典型部分少量有点有些(大团体或社会中的)一组,一群,一伙元素(如金、氧、碳)(尤指恶劣的)天气(学科的)基本原理,基础,纲要(尤指动物的)自然环境,适宜的环境电热元件

例句,

Fitness has now become an important element in our lives.

现在健康已经成为我们生活中的一个要素。

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS。