自定义，步骤条，样式
需求:要动态写出跟上图一样的效果
箭头用动态class生成的吧
第一排 123 箭头是朝右
第二排 654 箭头朝左
3-4箭头朝下
有规律的
麻烦帮忙看这种怎么写
list=[{
"stageName": "第一阶段",
"status": "完成",
"num": 1
},
{
"stageName": "第二阶段",
"status": "完成",
"num": 2
},
{
"stageName": "第三阶段",
"status": "完成",
"num": 3
},
{
"stageName": "第四阶段",
"status": "完成",
"num": 4
},
{
"stageName": "第五阶段",
"status": "进行中",
"num": 5
},
{
"stageName": "第六阶段",
"status": "未完成",
"num": 6
},
{
"stageName": "第七阶段",
"status": "未完成",
"num": 7
},
{
"stageName": "第八阶段",
"status": "未完成",
"num": 8
},
{
"stageName": "第九阶段",
"status": "未完成",
"num": 9
},
{
"stageName": "第十阶段",
"status": "未完成",
"num": 10
},
{
"stageName": "第十一阶段",
"status": "未完成",
"num": 11
}
]
有帮助的话 采纳一下
function drawFlowChart(rows) {
let container = document.getElementById("container");
// 清空已有元素
container.innerHTML = '';
for (let i = 0; i < rows; i++) {
// 生成方框
let box = document.createElement("div");
box.id = `box${i+1}`;
box.innerText = `Box ${i+1}`;
container.appendChild(box);
// 连接箭头
if (i > 0) {
jsPlumb.connect({
source: `box${i}`,
target: `box${i+1}`,
endpoint: "Rectangle"
});
}
}
// 倒数第二行连接最后一行
if (rows >= 2) {
jsPlumb.connect({
source: `box${rows-1}`,
target: `box${rows}`,
anchor: "Right",
endpoint: "Rectangle"
});
}
}
// 使用
drawFlowChart(3); // 生成3行流程图
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7668920
- 除此之外, 这篇博客: 小程序--微信小程序使用阿里巴巴矢量库图标中的 2.2如何查看class对应的图标， 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
下载项目后有
demo_index.html文件，
通过浏览器打开，即可查看使用Unicode码引用、Font class方式引用等，
<div id="container">
<div v-for="(v,k) in calclist" :key="k">
<!-- 判断是奇数行还是偶数行 -->
<template v-if="k%2 == 0" >
<div class="even">
<div v-for="(cv,ck) in v" :key="ck">
<div class="even-item">
<div class="even-info">{{cv.num}}</div>
<!-- 判断一下是否是最后一个，每行的最后一个不需要加左右箭头 -->
<template v-if="ck != 3">
<!-- 判断一下是否是最后一个，总的最后一个也不需要加箭头 -->
<template v-if="calclist.length != k+1 || ck+1 != v.length">
<div class="odd-arrow">➡</div>
</template>
</template>
</div>
</div>
</div>
<!-- 将每行的向下箭头单独放一行 -->
<template v-if="calclist.length != k+1">
<div class="even-down">
⬇
</div>
</template>
</template>
<template v-else>
<div class="odd">
<div v-for="(cv,ck) in v" :key="ck">
<div class="odd-item">
<div class="odd-info">{{cv.num}}</div>
<template v-if="ck != 3">
<template v-if="calclist.length != k+1 || ck+1 != v.length">
<div class="odd-arrow">⬅</div>
</template>
</template>
</div>
</div>
</div>
<template v-if="calclist.length != k+1">
<div class="odd-down">
⬇
</div>
</template>
</template>
</div>
</div>
export default {
data(){
return{
list: [{ num: 1 }, { num: 2 }, { num: 3 }, { num: 4 }, { num: 5 }, { num: 6 }, { num: 7 }, { num: 8 }, { num: 9 }, { num: 10 }, { num: 11 }],
calclist: [],
}
},
created(){
this.init()
},
methods:{
init() {
let arr = [];
this.list.forEach(e => {
if (arr.length == 4) {
this.calclist.push(arr)
arr = [];
arr.push(e)
} else {
arr.push(e)
}
});
if (arr.length != 0) {
this.calclist.push(arr)
}
},
}
}
.even,
.odd {
display: flex;
flex-direction: row;
justify-content: start;
}
.even-info,
.odd-info {
border: 1px solid red;
width: 70px;
text-align: center;
padding: 3px 0;
}
.even-item,.odd-item{
width: 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.even-down {
display: flex;
justify-content: right;
padding-right: 60px;
}
.odd-down{
display: flex;
justify-content: left;
padding-left: 30px;
}
.even-arrow,.odd-arrow{
width: 30px;
text-align: center;
}
#container {
width: 400px;
margin: 0 auto;
}
如果有用，望采纳!
第二行应该显示的数据是倒序吧？8765 这个样子，然后如果数据少的话，第二排这种 数据应该是靠右的吧