资讯专栏INFORMATION COLUMN

iview Table表格组件无法拆分单元格的解决思路

songze / 2073人阅读

摘要:因为我们项目中首要的是单元格拆分的,因此以拆分为例。使用函数对表格组件的表格列配置数据进行动态改造,普通单元格渲染标签呈现数据,要拆分的单元格渲染原生标签最后隐藏嵌套表格的边框及调整相关原生表格样式。

最近在开发的Vue项目中,使用了iview第三方UI库;对于表格组件的需求是最多的,但是在一些特定场景下,发现iview的表格组件没有单元格合并与拆分的API,搜了一下发现很多同学提问关于iview表格组件的单元格如何拆分和合并的问题。因此某家在此说下我们在项目中如何填的这个坑。
因为我们项目中首要的是单元格拆分的,因此以拆分为例。基本思路就是:不在源码层面进行修改;在外部对Table组件进行二次封装。使用vue render函数对表格组件的表格列配置数据进行动态改造,普通单元格渲染span标签呈现数据,要拆分的单元格渲染原生table标签;最后隐藏嵌套表格的边框及调整相关原生表格样式。
这里注意之前打算用iview Table组件进行嵌套,但是发现修改table组件的样式非常麻烦,而且没有效果,一不小心就容易污染全局样式,因此后来用原生table标签完美解决样式不可控问题。

1. 首先对于整体表格的列配置数据中有拆分的列进行添加split为true的属性。

2.对于表格数据源进行子表格数据定义,也就是用数组的形式包含子表格数据

3.使用vue render函数动态渲染改造表格列结构,通单元格渲染span标签呈现数据,要拆分的单元格渲染原生table标签。

      let vm = this;
      this.columnsList.forEach(item => {
        // 可编辑单元格
        if (item.editable) {
          item.render = (h, param) => {
            let currentRow = this.thisTableData[param.index];
            if (currentRow.editting) {
              // 正在编辑
              if(item.split){
                    var childArray = currentRow[item.key];
                    var inputArray=[];
                    childArray.forEach(item => {
                          var aa = h("Input", {
                                      style:{
                                          width:"80%",
                                          "margin-top":"10px",
                                          "margin-bottom":"10px"
                                       },
                                      props: {
                                          type: "text",
                                          value: item.child
                                       },
                                      on: {
                                            "on-change" (event) {
                                                  let key = param.column.key;
                                                  var ffffd = vm.edittingStore[param.index][key];
                                                  //item.child = event.target.value;
                                                  //计算当前的索引
                                                  var currentIndex = childArray.indexOf(item);
                                                  //更新数据
                                                  vm.edittingStore[param.index][key][currentIndex].child = event.target.value;
                                             }
                                       }
                           });
                          inputArray.push(aa)

                          var currentIndex = childArray.indexOf(item);
                          if(currentIndex!==childArray.length-1){
                                var bb = h("hr",{
                                            style:{
                                                height:"1px",
                                                "background-color":"#e9eaec",
                                                border:"none"
                                             }
                                 })
                                inputArray.push(bb)
                           }
                     })
                    return h("Row",inputArray)
               }
              else
              {          
                    return h("Input", {
                                style:{
                                    width:"80%"
                                },
                                props: {
                                    type: "text",
                                    value: currentRow[item.key]
                                },
                                on: {
                                    "on-change" (event) {
                                        let key = param.column.key;
                                        vm.edittingStore[param.index][key] = event.target.value;
                                    }
                                }
                     });
               }
            } else {
              // 没在编辑
              if (this.editIncell) {
                // 单元格内编辑
                return h("Row", {
                  props: {
                    type: "flex",
                    align: "middle",
                    justify: "center"
                  }
                }, [
                  h("Col", {
                    props: {
                      span: "16"
                    }
                  }, [
                    currentRow.edittingCell[param.column.key] ? cellInput(this, h, param, item) : h("span", currentRow[item.key])
                  ]),
                  h("Col", {
                    props: {
                      span: "8"
                    }
                  }, [
                    currentRow.edittingCell[param.column.key] ? saveIncellEditBtn(this, h, param) : inCellEditBtn(this, h, param)
                  ])
                ]);
              } else {
                // 非单元格内编辑
                  if(item.split){

                        if(currentRow.childProject.length==1){
                            var value = currentRow.childProject[0].child;
                            return h("span", value);
                        }

                        //用原生HTML标签渲染
                        var trAarry=[];
                        var childArray = currentRow[item.key];
                        childArray.forEach(item => {
                              var aa = h("tr",{},[
                                        h("td",{
                                            style:{
                                                border:0,
                                                "text-align":"center"
                                            }
                                        },item.child),
                              ])
                              trAarry.push(aa)
                                    
                              var currentIndex = childArray.indexOf(item);
                              if(currentIndex!==childArray.length-1){
                                    var bb = h("hr",{
                                            style:{
                                                height:"1px",
                                                "background-color":"#e9eaec",
                                                border:"none"
                                             }
                                    })
                                    trAarry.push(bb)
                              }
                        })

                        return h("table",{style:{
                                  "width":"100%",
                                  margin:0,
                                  border:0
                        }},trAarry)
                  }
                  else  return h("span", currentRow[item.key]);
              }
            }
          };
        }
        // 编辑和删除按钮
        if (item.handle) {
          item.render = (h, param) => {
            let currentRowData = this.thisTableData[param.index];
            let children = [];
            item.handle.forEach(item => {
              if (item === "edit") {
                children.push(editButton(this, h, currentRowData, param.index));
              } else if (item === "delete") {
                children.push(deleteButton(this, h, currentRowData, param.index));
              }
            });
            return h("div", children);
          };
        }
      });
    } 

4.完美实现了单元格拆分为列的效果。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97429.html

相关文章

  • 精读《Tableau 探索式模型》

    摘要:比如我们对调与会怎样我们得到了三个不同类目近个月的趋势,之所以是折线图,因为图表的维度轴列是连续的。在正式介绍标记区域前,先理解一下为何会发生这种转变表格类组件是双维度组件,折线图是单维度组件。 1. 引言 Tableau 探索式分析功能非常强大,各种功能组合似乎有着无限的可能性。 今天笔者会分析这种探索式模型解题思路,一起看看这种探索式分析功能是如何做到的。 2. 精读 要掌握探索式...

    curried 评论0 收藏0
  • React 实现 Table 的思考

    摘要:加这两个属性的原因很容易想到,因为我们在写表格相关业务时,样式里面写的最多的就是单元格的宽度和对齐方式。然而,写的表格后粘贴在中,整行的内容都在一个单元格里面,用写的表格则能够几乎保持原本的格式,所以我们这次用了原生的来写表格。 Table 是最常用展示数据的方式之一,可是一个产品中往往很多非常类似的 Table,但是我们碰到的情况往往是 Table A 要排序,Table B 不需要...

    ChanceWong 评论0 收藏0
  • iView 发布 3.0 版本,以及开发者社区等 5 款新产品

    摘要:相对时间组件锚点组件面板分割组件分割线组件单元格组件相对时间组件用于表示几分钟前几小时前等相对于此时此刻的时间描述。单元格组件在手机上比较常见,在上则常用于固定的侧边菜单项。开发者社区这是发布会最劲爆的一款产品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日,我们成功地召开了 iView 3...

    FreeZinG 评论0 收藏0

发表评论

0条评论

songze

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<