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