css 步骤条

html-css036

css 步骤条,第1张

你说的应该是有序列表和无序列表。

有序列表代码:

<ol><li>步骤1</li><li>步骤2</li>

</ol>

运行效果:

1、步骤1

2、步骤2

无序列表代码:

<ul><li>步骤1</li><li>步骤2</li>

</ul>

运行效果:

·步骤1

·步骤2

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

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

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

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

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

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

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

1、首先是计算一行的价格。这个功能在上篇博客里有提到,这里就不列举出来了。

2、遍历选中的几行,将每行的数值相加。

3、将值赋给总金额显示出来。当取消勾选或加减数量时,金额会相应改变。