view deign 和 vue2 合并单元格的方法

1.vue版本和view design 版本

javascript 复制代码
{
   "vue": "^2.6.11",
   "view-design": "^4.7.0",
}

2.Data中定义数据

复制代码
spanArr: [], // 某一列下需要合并的行数
pos: 0// 索引

// 注意点: 在获取列表前,需要重置 this.spanArr = []

注意点2: 获取列表的请求失败,页需要重置数据(就是列表数据是接口返回的对象中的一个字段,这个列表的标题和数据都是后端返回的,同时返回了其他字段,在请求前你需要重置所有数据,同时重置)

3.方法

javascript 复制代码
getSpanArr(data) {
 data.forEach((item, index) => {
  // 如果是第一个数据,就将列表spanArr添加一个1,表示暂时只有一个名字相同的、且将索引pos赋值为0
    if (index === 0) {
      this.spanArr.push(1)
      this.pos = 0
    } else {
      // 判断当前元素与上一个元素是否相同(这里我们拿要合并的日期date为例)
      if (item.time === data[index - 1].time) {
        // 如果相同就将索引为 pos 的值加一
        this.spanArr[this.pos] += 1
        // 且将数组添加 0
        this.spanArr.push(0)
      } else {
        // 如果元素不同了,就可以通过索引为 pos 的值知道应该需要合并的行数
        // 同时,我们再次添加一个值1,表示重新开始判断某个字段的重复次数
        this.spanArr.push(1)
        // 同时 索引加一
        this.pos = index
      }
    }
  })
},
// 合并单元格的
handleSpan ({ rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    const rowspan = this.spanArr[rowIndex]
    return {
      // 将需要合并的行数赋值给rowspan
      rowspan: rowspan,
      // colspan有两种情况要不是0不显示,要不是1显示,根据rowspan( _row)来确定;
      colspan: rowspan > 0 ? 1 : 0
    }
  }
},
相关推荐
爱看书的小沐1 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
知识分享小能手3 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
sniper_fandc3 天前
Vue3双向数据绑定v-model
前端·vue
知识分享小能手4 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
叫兽~~4 天前
vite vue 打包后运行,路由首页加载不出来
vue.js·vue
岁岁岁平安5 天前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
硅谷工具人6 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin6 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
知识分享小能手7 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发