项目场景:
之前去上海出差做项目,回来的时候正好遇上我们一个不太大的项目从jquery+layui转到vue+iview,
因为操作DOM流和操作数据不太一样,所以遇到很多麻烦事,比如说 ##流程图##
就是这样的
这个是原生写的样式和事件,看得出来这个拐弯和蛇形排列都挺难的
但是之前的项目里都调好了,每一行都是一个盒子,利用盒子的index的奇偶数判断float左还是又,然后这个弯是一个div做的半圆,整体用样式拼出来
问题描述:
之前用jquery写的时候,是往DOM里面append,写的比较死,转成vue就要在页面做v-for,而且头和尾都是占位置的,直接v-for的话就会失去一行的概念,流程图就不能根据行数拐弯,所以第一版简单的v-for就被pass,<div id="flowBox" class="flow-box">
<div class="no-data" v-if="flowData.length <= 0">暂无数据</div>
<Row id="flowBoxContent">
<Col span="4" v-if="flowData.length > 0">
<div class='flow-item start'>
<div class='flow-start-pic'></div>
</div>
</Col>
<Col span="4" v-for="(item,key) in flowData" :key="item.id" v-if="flowData.length > 0">
<div class='flow-item' @click="flowDataCheck(key)">
<p class='fi-time'>{{item.checkDate.slice(11, 19)}}</p>
<div class='fi-line'>
<div class='fi-line-half lf'></div>
<div class='fi-line-half rg'></div>
<div class='fi-dot'></div>
</div>
<div class='fi-con'>
<div class='fi-con-inner'>
<p class='fi-con-text text1 text-ellipsis'>{{item.checkDate.slice(0, 10)}}</p>
<!--<p class='fi-con-text text2 text-ellipsis'></p>-->
</div>
</div>
</div>
</Col>
<Col span="4" v-if="flowData.length > 0">
<div class='flow-item end'>
<div class='flow-end-pic'></div>
</div>
</Col>
</Row>
</div>
原因分析:
- 不能直接把数组分成六个一组,因为还有头和尾,目前我能想到的就是,用笨方法把数组拆成第一个数组5个元素,剩下的6个元素,如果最后一个数组元素有6个,为了最后插入一个尾巴,就要push空数组进去,v-for的时候多循环一行
- 要加入行,就要利用二维数组,用两层v-for,渲染行,和每行的内容,这样就可以有行的概念,可以用样式判断拐弯了
- 关于头和尾出现的位置,就在每一行都放一个头和一个尾,用v-if判断数组的index,第一行有头,最后一行有尾,就对了
解决方案:
接下来就是实践阶段,- 处理数组,把数组拼成第一个数组5个元素,剩下的6个元素,如果最后一个数组元素有6个,为了最后插入一个尾巴,就要push空数组进去,具体操作如下
/**
* 前5个一组,剩下的6个一组,如果最后一组正好6个,push个空数组
* */
let newDataArr = [] // 新的二维数组
let lastArr = [] // 剩下的数组
newDataArr.push(res.data.slice(0,5));
lastArr = res.data.slice(5,res.data.length)
for(var i=0;i<lastArr.length;i+=6){
newDataArr.push(lastArr.slice(i,i+6));
}
if (newDataArr[newDataArr.length-1].length === 6){
newDataArr.push([])
}
console.log(newDataArr)
this.flowDataFinal = newDataArr
- 加入行的概念,嵌套v-for,
- 在v-for里面加入半圆,当作拐弯,用样式控制半圆出现在左边还是右边
<Row>
<div class='flow-row' v-for="(flowDataFinItem,flowDataKey) in flowDataFinal" :key="flowDataFinItem.id" v-if="flowData.length > 0">
<div class='flow-turn'>
<div class='flow-turn-inner'></div>
</div>
<div class="flow-nodes">
<Col span="4" v-if="flowDataKey === 0">
<div class='flow-item start'>
<div class='flow-start-pic'></div>
</div>
</Col>
<Col span="4" v-for="(item,key) in flowDataFinal[flowDataKey]" :key="item.id" v-if="flowData.length > 0">
<div class='flow-item' @click="flowDataCheck(key)">
<p class='fi-time'>{{item.checkDate.slice(11, 19)}}</p>
<div class='fi-line'>
<div class='fi-line-half lf'></div>
<div class='fi-line-half rg'></div>
<div class='fi-dot'></div>
</div>
<div class='fi-con'>
<div class='fi-con-inner'>
<p class='fi-con-text text1 text-ellipsis'>{{item.checkDate.slice(0, 10)}}</p>
</div>
</div>
</div>
</Col>
<Col span="4" v-if="flowDataKey === flowDataFinal.length-1">
<div class='flow-item end'>
<div class='flow-end-pic'></div>
</div>
</Col>
</div>
</div>
</Row>
最后就可以啦,一个流程图我可研究好几天了枯了,最后就是这个亚子,因为样式什么的,直接copy过来就可以,重点就是利用奇数偶数判断float左右和半圆的左右,打字不易可以帮到你的话赞一下哈哈哈哈哈哈