vxe-table 多维度表格的开发

于 2024-07-04 17:17:49 发布
阅读量327 收藏 4
点赞数 12
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42938212/article/details/140183918
版权

需求原型图
统统计每周每个项目对应承接部门的计划人天和日报人天消耗对比。停机在这里插入图片描述
具体开发
1、使用 vxe-table插件，安装vxe-table
2、根据需求及数据格式决定采用 vxe-table 中反转表格，具体可见vxe-table 官网
3、项目中使用

<template>
  <div id="portal-form-list-container">
    <div id="ApplicationList" ref="application" class="application-box">
      <div class="custom-list-table-box">
       <div ref="contentTop" class="content-top">
        <a-button type="primary" @click="handleExport">导出</a-button>
      </div>
        <vxe-grid 
        class="reverse-table"
         v-bind="gridOptions1"
        ></vxe-grid>
      </div>
      </div>
    </div>
</template>

4、主要问题点
（1）、每个月中对应每周项目动态生成
（2）、项目对应承接部门数据动态
（3）、项目及部门对应数据

5、配置项 gridOptions1的组装
接口数据通过后端接口获得

getcalcStatisticsInfo(){
  let vm  = this
  let formData = new FormData();
  formData.append('beginDate',this.beginDate)
  formData.append('endDate', this.endDate)
  axios.post((window as any).config.apiHost+'/test',formData).then((res:any)=>{
    if(res.errcode===0){
      let list = []
      this.datatest.data.map(item=>{
        //处理有几列数据 begin
        let len = 0
        item.weeklyStatisticsResponseList.map(v=>{
          // len = len + v.departmentStatisticsResponseList.length  
          if(v.departmentStatisticsResponseList.length ===0){
            len = len+1
          }else{
            len = len+v.departmentStatisticsResponseList.length
          }
        })
        list.push(len)
        //处理有几列数据 end
      })
  

      let max = Math.max(...list) //最大的那个数字
      console.log(max,'maxmaxmax')
      this.max = max

      let columns = []
      let objColum:any = {}
      for (let i = 0; i <= max; i++) {
        const colObj:any={
          field:'col'+ (i+1)
        }
        objColum['col'+ (i+1)] =''

        columns.push(colObj)
     }
     this.objColum = objColum



     this.gridOptions1.columns = columns

     let dataList = []
     let deptCJ = []
     this.datatest.data.map(item=>{
        let obj:any = Object.assign({},this.objColum) //将月份数据先放进去
        let ob2:any = Object.assign({},this.objColum)//将周数据 放进去
        let ob3:any = Object.assign({},this.objColum)//将承接部门 放进去
        //月份数据
        obj.col1 = '月份'
        obj.col2 = item.month +'月'

        ob2.col1 = '周'
        ob3.col1 = '承接部门'
         //周数据
        dataList.push(obj)
        //将周数据加进去
        dataList.push(ob2)
        dataList.push(ob3)

        var len = 0
        let deptrowList = []
        let rowd :any = []
        let rowday :any = []
        let rowdayList :any = []
        let pre = 0
        let numjishu = 2
        let preNmu  = 1

        let dianwei:any = 0 //主要用于计算合并的行和列
        let leftdeptList = [] //左边部门数据
  
 item.weeklyStatisticsResponseList.forEach((v,depIndex)=>{ 
  
          var dep = []
          let depatLen :any= v.departmentStatisticsResponseList.length ? v.departmentStatisticsResponseList.length:1

          //设置周的数据
          if(depIndex===0){
            ob2.col2 =  '第'+ v.weekly +'周'
            preNmu = 1
            dianwei = 2
          }
          if(depIndex >0){
            let predepartLen = item.weeklyStatisticsResponseList[depIndex-1].departmentStatisticsResponseList.length
            dianwei = dianwei  + (predepartLen ? predepartLen:1)
            let key = 'col'+ dianwei
            ob2[key] = '第'+ v.weekly +'周'
          }
          
          if(v.departmentStatisticsResponseList && v.departmentStatisticsResponseList.length>0){
            v.departmentStatisticsResponseList.map((dept:any)=>{
              let ob2Dept:any = Object.assign({},this.objColum) //部门的，也就是项目数据
              ob2Dept.col1 = dept.departmentName
              const foundNumber = dataList.find(fitem => fitem.col1 === dept.departmentName)
              const isDept = leftdeptList.find(fitem => fitem.undertakingDepartment === dept.undertakingDepartment)

              if(!isDept){
                leftdeptList.push(dept)
              }
              rowdayList.push(dept)
              rowd.push(dept.projectName) //承接部门的数据
              rowday.push(dept.planDay+ '/' + (dept.actualDay))

            })
          }else{
            rowd.push(null)
            rowday.push(null)
            rowdayList.push(null)
          }

        })

        //处理承接部门的数据
        rowd.forEach((r,Rindex)=>{
          let len = Rindex+2
          var type = 'col'+len
          ob3[type] = r
        })

      

        leftdeptList.forEach((d:any,Dindex)=>{
          console.log()
          let ob2Dept:any = Object.assign({},this.objColum) //部门的，也就是项目数据
          ob2Dept.col1 = d.departmentName
          dataList.push(ob2Dept)

          rowdayList.forEach((r,Dindex)=>{
            let len = Dindex+2
            var type = 'col'+len
            if(d && r){
              if(r.departmentName === d.departmentName){
                ob2Dept[type] = r.planDay +'/' + r.actualDay
              }
            }
          })
          
          
        })
      })
      this.dataList = dataList
      this.gridOptions1.data = dataList
      console.log(dataList,'dataListdataListdataList')
      this.mergeCells()

    }
  })
}
//计算合并的行和列
mergeCells(){
     let mergeCells = []
      let rowZlist={
      }
       this.dataList.map((Mitem:any,MIndex:any)=>{
        if(Mitem.col1 ==='月份'){
          var objMY:any={
            row: MIndex, col: 1, rowspan: 0, colspan: this.max+1
          }
          mergeCells.push(objMY)
        }
        if(Mitem.col1 ==='周'){
          rowZlist[MIndex] = MIndex
          let objW = Mitem
          let col = 1
  
         let indexB = 0
         let preB = 0

         let W1 = 0
         let W2 = 0
         let W3 = 0
         let W4 = 0
         let W5 = 0
         let itemList = this.dataList[MIndex].length
         var arr = Object.keys(Mitem); //对象最大的长度
         let itemLen = arr.length 
          for (var i in Mitem){
              col =  indexB -1
              if(Mitem[i]==='第1周'){
                W1 = indexB
              }
              if(Mitem[i]==='第2周'){
                W2 = indexB
                var objMY:any={
                  row: MIndex, col: W1, rowspan: 0, colspan: W2-W1
                }
                mergeCells.push(objMY)
              }
              if(Mitem[i]==='第3周'){
                W3 = indexB
                var objMY3:any={
                  row: MIndex, col: W2, rowspan: 0, colspan: W3-W2
                }
                mergeCells.push(objMY3)
              }
              if(Mitem[i]==='第4周'){
                W4 = indexB
                var objMY4:any={
                  row: MIndex, col: W3, rowspan: 0, colspan: W4-W3
                }
                mergeCells.push(objMY4)
              }
              if(Mitem[i]==='第5周'){
                W5 = indexB
                console.log(indexB,'第5周')
                var objMY5:any={
                  row: MIndex, col: W4, rowspan: 0, colspan: W5-W4
                }
                console.log(indexB,'indexBindexBindexB')
         
                mergeCells.push(objMY5)

                var objMY6:any={
                  row: MIndex, col: W5, rowspan: 0, colspan:itemLen- W5
                }
                mergeCells.push(objMY6)
                
              }
            indexB ++
          }

        }
      })
      this.gridOptions1.mergeCells = mergeCells

}

5、模拟数据

  data :any = {
  "errcode": 0,
  "errmsg": "",
  "data": [
    {
      "month": 7,
      "weeklyStatisticsResponseList": [
        {
          "weekly": 1,
          "departmentStatisticsResponseList": [
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "测试任务管理1-zzq",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 112,
              "actualDay": 0
            },
            {
              "projectId": "debb7c17c9674b69a21eaf2da7d70021",
              "projectName": "测试项目001",
              "undertakingDepartment": "2c2c80848c0fd791018c10029bb10004",
              "departmentName": "天骏创客",
              "planDay": 152,
              "actualDay": 0
            },
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "测试项目任务管理3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 112,
              "actualDay": 0
            }
          ],
          "dayList": [
            "2024-07-01",
            "2024-07-02",
            "2024-07-03",
            "2024-07-04",
            "2024-07-05",
            "2024-07-06",
            "2024-07-07"
          ]
        },
        {
          "weekly": 2,
          "departmentStatisticsResponseList": [
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "测试项目任务管理3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 56,
              "actualDay": 0
            },
            {
              "projectId": "debb7c17c9674b69a21eaf2da7d70021",
              "projectName": "测试项目001",
              "undertakingDepartment": "2c2c80848c0fd791018c10029bb10004",
              "departmentName": "天骏创客",
              "planDay": 8,
              "actualDay": 0
            },
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "测试任务管理1-zzq",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 56,
              "actualDay": 0
            }
          ],
          "dayList": [
            "2024-07-08",
            "2024-07-09",
            "2024-07-10",
            "2024-07-11",
            "2024-07-12",
            "2024-07-13",
            "2024-07-14"
          ]
        },
        {
          "weekly": 3,
          "departmentStatisticsResponseList": [
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "测试项目任务管理3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 56,
              "actualDay": 0
            },
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "测试任务管理1-zzq",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 56,
              "actualDay": 0
            }
          ],
          "dayList": [
            "2024-07-15",
            "2024-07-16",
            "2024-07-17",
            "2024-07-18",
            "2024-07-19",
            "2024-07-20",
            "2024-07-21"
          ]
        },
        {
          "weekly": 4,
          "departmentStatisticsResponseList": [
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "测试项目任务管理3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 56,
              "actualDay": 0
            },
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "测试任务管理1-zzq",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 56,
              "actualDay": 0
            }
          ],
          "dayList": [
            "2024-07-22",
            "2024-07-23",
            "2024-07-24",
            "2024-07-25",
            "2024-07-26",
            "2024-07-27",
            "2024-07-28"
          ]
        },
        {
          "weekly": 5,
          "departmentStatisticsResponseList": [
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "测试项目任务管理3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 24,
              "actualDay": 0
            },
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "测试任务管理1-zzq",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 24,
              "actualDay": 0
            }
          ],
          "dayList": [
            "2024-07-29",
            "2024-07-30",
            "2024-07-31"
          ]
        }
      ]
    },
     {
      "month": 8,
      "weeklyStatisticsResponseList": [
        {
          "weekly": 1,
          "departmentStatisticsResponseList": [
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "8月测试项目1",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "开发部1",
              "planDay": 112,
              "actualDay": 0
            },
            {
              "projectId": "debb7c17c9674b69a21eaf2da7d70021",
              "projectName": "8月测试项目2",
              "undertakingDepartment": "2c2c80848c0fd791018c10029bb10004",
              "departmentName": "开发部2",
              "planDay": 152,
              "actualDay": 0
            },
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "8月测试项目3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 112,
              "actualDay": 0
            }
          ],
          "dayList": [
            "2024-07-01",
            "2024-07-02",
            "2024-07-03",
            "2024-07-04",
            "2024-07-05",
            "2024-07-06",
            "2024-07-07"
          ]
        },
        {
          "weekly": 2,
          "departmentStatisticsResponseList": [
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "2周项目1",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 56,
              "actualDay": 0
            },
            {
              "projectId": "debb7c17c9674b69a21eaf2da7d70021",
              "projectName": "2周项目2",
              "undertakingDepartment": "2c2c80848c0fd791018c10029bb10004",
              "departmentName": "天骏创客",
              "planDay": 8,
              "actualDay": 0
            },
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "2周项目3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 56,
              "actualDay": 0
            }
          ],
          "dayList": [
            "2024-07-08",
            "2024-07-09",
            "2024-07-10",
            "2024-07-11",
            "2024-07-12",
            "2024-07-13",
            "2024-07-14"
          ]
        },
        {
          "weekly": 3,
          "departmentStatisticsResponseList": [
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "测试项目任务管理3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 56,
              "actualDay": 123
            },
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "测试任务管理1-zzq",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 33,
              "actualDay": 34
            }
          ],
          "dayList": [
            "2024-07-15",
            "2024-07-16",
            "2024-07-17",
            "2024-07-18",
            "2024-07-19",
            "2024-07-20",
            "2024-07-21"
          ]
        },
        {
          "weekly": 4,
          "departmentStatisticsResponseList": [
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "8月4周1",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 98,
              "actualDay": 4
            },
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "8月4周2-zzq",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 33,
              "actualDay": 68
            }
          ],
          "dayList": [
            "2024-07-22",
            "2024-07-23",
            "2024-07-24",
            "2024-07-25",
            "2024-07-26",
            "2024-07-27",
            "2024-07-28"
          ]
        },
        {
          "weekly": 5,
          "departmentStatisticsResponseList": [
            {
              "projectId": "d3602c541f3a42ee98c6b6ed70013956",
              "projectName": "测试项目任务管理3",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e430d6d",
              "departmentName": "项目部",
              "planDay": 24,
              "actualDay": 0
            },
            {
              "projectId": "67fc3c17ab4948aab45a6a7d630bccc8",
              "projectName": "测试任务管理1-zzq",
              "undertakingDepartment": "2c2c80848c1041cc018c90511e350d64",
              "departmentName": "真空事业部",
              "planDay": 24,
              "actualDay": 0
            }
          ],
          "dayList": [
            "2024-07-29",
            "2024-07-30",
            "2024-07-31"
          ]
        }
      ]
    }
  ]
}

6、最终展示效果
在这里插入图片描述

阿瑶～
关注
  • 12
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vxe-table：一个基于vue功能强大的表格组件（支持树形，移动web开发框架盘点
m0_61067876的博客
03-20 680
组件中有详细的开发指南，其实不用做我过多的介绍，根据你的需求可以进行安装和使用！但是呢，既然分享这个组件啦，那就顺便给大家展示一下在vue项目中使用的具体步骤吧，也算自己再学习学习！
vue element 中的table动态渲染实现（动态表头）
10-15
主要介绍了vue element 中的table动态渲染实现（动态表头），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vxe-table基础版表格，实现企业版专业版的范围框选功能--js版本
最新发布
qq_35641337的博客
06-21 66
vxe-table基础版表格，实现企业版专业版的范围框选功能--js版本，复制即可享用。的surely table，遂放弃。本来想加个右键菜单，因为改用了。修改自大佬的ts版本。
Aspose.Words For JAVA 动态制作多维度表格(涵2024最新无水印包)
李指导的博客
02-20 1446
Aspose.Words是一种高级Word文档处理API，用于执行各种文档管理和操作任务。API支持生成，修改，转换，呈现和打印文档，而无需在跨平台应用程序中直接使用Microsoft Word。 所谓多维度表格通常包含多个维度, 每个维度都代表一种数据属性,多维度表格可以用于数据分析，通过不同的维度对数据进行拆分和聚合，以便更好的了解数据的分布和特征。 这个表格不是创建出来样式再去填充数据,而是根据数据循环动态的创建出来表格,这样可灵活性高,用于多数据集合。
vxe-table：一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等）
sgegv的博客
05-07 369
vxe-button @click=“$refs.xTree.toggleTreeExpansion(tableData[0], true)”>切换第一个。展开第三个。展开所有。//如果用不到这个组件的弹窗可以不写，根据个人使用情况而定。
vxe-table vue 中支持虚拟滚动组件：虚拟列表、虚拟树、横向与纵向虚拟滚动的列表与表格组件
热门推荐
大猩猩X
06-13 2万+
vxe-table vue 目前为止唯一能全能支持虚拟滚动的组件：虚拟列表、虚拟树、横向与纵向虚拟滚动的表格组件 目前主流的数据驱动框架 react、vue …等虽然入门相当简单；例如 vue 中，由于数据双向的原因，需要对数据进行双向监听，从而使渲染性能大幅下降，如果数据量稍微大一点，页面基本上是直接卡死，那么如何解决呢？ 虚拟组件由此诞生，只渲染当前可视区的内容，其余的收起，当滚动到指定位置时才渲染对应的节点，即时 vue 的双向绑定会损耗性能，由于 dom 节点的大幅减少，也不会对性能造成影响，从而流
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向现代浏览器，高效的简洁 API 设计 模块化表格、按需加载、插件化扩展 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能 功能： Basic table （基础表格） Grid （高级表格） Size （尺寸） Striped （斑马线条纹） Table with border （带边框） Cell style （单元格样式） Column resizable （列宽拖动） Maximum table height （最大高度） Resize height and width （响应式宽高） Fixed column （固定列） Grouping table head （表头分组） Highlight row and column （高亮行、列) Table sequence （序号) Radio （单选) Checkbox （多选） Sorting （排序） Filter （筛选） Rowspan and colspan （合并行或列） Footer summary （表尾合计） Import （导入) Export （导出) Print （打印) Show/Hide column （显示/隐藏列） Loading （加载中） Formatted content （格式化内容） Custom template （自定义模板） Context menu（快捷菜单） Virtual Scroller（虚拟滚动） Expandable row （展开行） Pager（分页） Form（表单） Toolbar（工具栏） Tree table （树形表格) Editable CRUD（增删改查) Validate（数据校验） Data Proxy（数据代理） Keyboard navigation（键盘导航） Modal window（模态窗口） Charts（图表工具） 更新日志： v4.0.20 table 修改单选框、复选框获取值错误问题 grid 修复 KeepAlive 中报错问题
vxe-table vue table 表格组件功能
01-21
查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •...
vxe-table-plugin-menus::deciduous_tree: 基于 vxe-table 的表格插件，提供实用的快捷菜单集
04-13
vxe-table-plugin-menus 基于 的表格插件，提供实用的快捷菜单集 Installing npm install xe-utils vxe-table@next vxe-table-plugin-menus@next // ... import VXETable from 'vxe-table' import ...
vxetablevuetable一个功能更加强大的Vue表格组件
08-10
vxe-table vue table
vxe-table 小众但功能齐全的vue表格组件
牵手就能做朋友的博客
02-01 7416
vxe-table，一个小众但功能齐全并支持excel操作的vue表格组件
vxe-tablevue表格解决方案 v2.9.25
11-03
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能：Basic table （基础表格）Grid
vxe-table文档(4.x)
06-13
配合nginx，可在内网部署 server { listen 8003; server_name localhost; location / { root E:/doc-site/vxe-table-docs-main/v4/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } }
Vxe table - 基于Vue的宝藏级 table 组件
qq_34082921的博客
11-10 1万+
对于表格来说，也许我们会遇到一个需求就是表格中的单元格可编辑，如果我们使用的是ElementUI也许不太好办，因为官方没有可编辑的这个操作，有可能使用的方法就是写一个输入框，当点击的时候控制内容与输入框的显示于隐藏。今天介绍另一种方式就是使用vxe-table开发文档git地址vxe-table一个基于 Vue（支持 Vue3） 的 PC 端全功能表格组件，满足你对 table 绝大多数需求，可与任意组件库完美兼容。
vxe-table的安装与使用
weixin_46394325的博客
05-22 1690
功能更强大的table组件
vxe-table 跨页勾选,可回显
jyf_568的博客
05-06 670
<vxe-table ref="table" v-loading="listLoading" :data="tableData" border stripe :height="tableHeight" show-footer :footer-method="footerMethod" ...
vxe-table官方文档地址
qq_66133937的博客
10-12 867
找了好久QAQ。
vx-table可编辑表格父子组件问题
qq_42797527的博客
04-20 1885
记录一下前端遇到的问题 1vx-table可编辑表格中的单元格嵌套下拉容器 ①实现点击单元格，单元格可编辑，同时弹出下拉框 ②实现选中下拉框的数据可以同步更新到表格中 ③实现单元格支持搜索可以喝下拉框的数据联动 ④实现下拉容器解耦，作为一个子组件嵌套进页面中链接: vxtable官网 注意点 1 可编辑表格的默认绑定和可编辑的绑定可以同时出现 2常用的API 将官网例子改为 父子组件
j-vxe-table嵌套子表格
06-28
### 回答1： j-vxe-table是一个基于Vue.js构建的表格组件。它支持嵌套子表格，以一种清晰而有条理的方式呈现信息。 嵌套子表格是指在主表格中，某一行的数据可以展开显示其子表格，来呈现该行数据的更详细信息。j-vxe-table实现子表格的方式是通过在主表格的某一列中嵌套另一个表格组件，通过设置相关属性，将该表格组件的数据与主表格中该行数据相关联，从而在子表格中显示其详细信息。 使用j-vxe-table嵌套子表格需要注意以下几点： 1. 在主表格中定义哪一列需要展开子表格，并在该列对应的项中设置相应的属性，以告知j-vxe-table要显示子表格。 2. 在进行子表格的自定义时，需要使用j-vxe-table内置的组件和相关样式类，从而实现子表格的样式和结构。 3. 子表格和主表格数据的关联和传递需要使用Vue.js的自定义指令和事件来实现。 4. 可以通过配置j-vxe-table的属性来限制子表格的最大展示层数，从而避免嵌套子表格过度而导致页面混乱。 综上所述，j-vxe-table嵌套子表格是一种非常实用的数据展示方式，在需要呈现大量复杂数据时，可以极大地提升页面的可读性和易用性。但需要注意，在使用过程中，需要对j-vxe-table的属性和使用方法有一定的理解和掌握，才能发挥出其最大的效用。 ### 回答2： j-vxe-table是一款基于Vue.js开发的表格组件库。它支持各种常见的表格功能，如分页、排序、过滤、编辑、导出等，还可以轻松实现多级表头、合并单元格和树形表格等高级功能，非常方便实用。 对于嵌套子表格的需求，j-vxe-table同样可以轻松胜任。具体实现方法如下： 1. 首先，我们需要在父表格的列模板中添加一个slot，用于显示子表格。例如： ``` <template> <div> <vxe-table :data="tableData"> <vxe-table-column type="selection"></vxe-table-column> <vxe-table-column field="name" title="姓名"></vxe-table-column> <vxe-table-column field="age" title="年龄"></vxe-table-column> <!-- 添加子表格的列 --> <vxe-table-column label="详情"> <template #default="{row}"> <vxe-table :data="row.children"> <vxe-table-column field="address" title="地址"></vxe-table-column> <vxe-table-column field="phone" title="电话"></vxe-table-column> </vxe-table> </template> </vxe-table-column> </vxe-table> </div> </template> ``` 在这个例子中，我们添加了一个名为“详情”的列，它的模板中嵌套了一个子表格。子表格的数据通过父表格中每一行的“children”属性来获取。 2. 接下来，我们需要对子表格进行一些配置。首先，我们需要为子表格的列设置“small”属性，这样它可以与父表格中的数据对齐。另外，我们还需要添加“highlight-row”属性，以便在子表格中高亮显示当前行。例如： ``` <vxe-table :data="row.children" highlight-row :table-dynamic="{ 'scroll-y': '200px' }"> <vxe-table-column field="address" title="地址" width="120" small></vxe-table-column> <vxe-table-column field="phone" title="电话" width="140" small></vxe-table-column> </vxe-table> ``` 在这个例子中，我们通过“table-dynamic”属性对子表格设置了一个垂直滚动条，以便在数据较多时进行滚动浏览。 3. 最后，我们还需要在父表格和子表格中添加一些事件处理函数，以便处理用户的交互事件。例如，我们可以在父表格中添加一个“expand-change”事件，以便在用户展开或收起子表格时显示不同的icon。另外，我们还可以在子表格中添加“edit-closed”事件，以便在用户修改数据后自动保存并更新父表格中的数据。 总之，j-vxe-table嵌套子表格非常方便实用，大大提高了表格组件的灵活性和交互性。如果你正在开发一个需要嵌套表格的项目，那么j-vxe-table绝对是一个值得推荐的工具。 ### 回答3： J-vxe-table是一个基于Vue.js的表格组件库，提供了许多丰富的表格特性和功能。其中，嵌套子表格是魅力之一。在实际应用中，我们常常需要在一个父级表格中嵌套多个子级表格，以展示更详细的信息。 J-vxe-table通过提供类似于树形菜单的展示形式来实现嵌套子表格。我们可以通过设置columns、data等属性来初始化父级表格，并通过table-expand属性来启用嵌套子表格的展示。 在父级表格中，我们需要使用table-expand来定义“展开”自定义列，该列需要设置type为“expand”，并提供一个自定义的渲染函数。在渲染函数中，我们可以通过slot-scope指令来访问父级表格的当前行数据，并使用vxe-grid组件来嵌套子级表格。通过设置columns、data等属性来初始化子级表格，最终实现嵌套子表格的展示。 值得注意的是，J-vxe-table在嵌套子表格时，还提供了一些其他的特性和配置选项，如展开和收起行（table-expand-row、table-collapse-row）、展开和收起树形节点（tree-config）、带复选框的展开行（table-checkbox）等。这些特性和选项可以根据实际需求进行配置和定制，并且和嵌套子表格组合使用，可以为用户带来更多的交互和体验。 总之，J-vxe-table是一个功能强大的表格组件库，其嵌套子表格特性可以为我们提供更加灵活和丰富的表格展示方式。在应用中，我们可以根据实际需求，通过适当的配置和定制，让J-vxe-table更好地服务于我们的业务需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值