css 步骤条

html-css026

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、将值赋给总金额显示出来。当取消勾选或加减数量时，金额会相应改变。