vue+iview翻框架问题总结——流程图

项目场景：

之前去上海出差做项目，回来的时候正好遇上我们一个不太大的项目从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>

---

原因分析：

1. 不能直接把数组分成六个一组，因为还有头和尾，目前我能想到的就是，用笨方法把数组拆成第一个数组5个元素，剩下的6个元素，如果最后一个数组元素有6个，为了最后插入一个尾巴，就要push空数组进去，v-for的时候多循环一行
2. 要加入行，就要利用二维数组，用两层v-for，渲染行，和每行的内容，这样就可以有行的概念，可以用样式判断拐弯了
3. 关于头和尾出现的位置，就在每一行都放一个头和一个尾，用v-if判断数组的index，第一行有头，最后一行有尾，就对了

---

解决方案：

接下来就是实践阶段，

1. 处理数组，把数组拼成第一个数组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

2. 加入行的概念，嵌套v-for，
3. 在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左右和半圆的左右，打字不易可以帮到你的话赞一下哈哈哈哈哈哈