摘要：因為我們項目中首要的是單元格拆分的，因此以拆分為例。使用函數(shù)對表格組件的表格列配置數(shù)據(jù)進行動態(tài)改造，普通單元格渲染標簽呈現(xiàn)數(shù)據(jù)，要拆分的單元格渲染原生標簽最后隱藏嵌套表格的邊框及調(diào)整相關(guān)原生表格樣式。

最近在開發(fā)的Vue項目中，使用了iview第三方UI庫;對于表格組件的需求是最多的，但是在一些特定場景下，發(fā)現(xiàn)iview的表格組件沒有單元格合并與拆分的API，搜了一下發(fā)現(xiàn)很多同學提問關(guān)于iview表格組件的單元格如何拆分和合并的問題。因此某家在此說下我們在項目中如何填的這個坑。
因為我們項目中首要的是單元格拆分的，因此以拆分為例?；舅悸肪褪牵翰辉谠创a層面進行修改；在外部對Table組件進行二次封裝。使用vue render函數(shù)對表格組件的表格列配置數(shù)據(jù)進行動態(tài)改造，普通單元格渲染span標簽呈現(xiàn)數(shù)據(jù)，要拆分的單元格渲染原生table標簽；最后隱藏嵌套表格的邊框及調(diào)整相關(guān)原生表格樣式。
這里注意之前打算用iview Table組件進行嵌套，但是發(fā)現(xiàn)修改table組件的樣式非常麻煩，而且沒有效果，一不小心就容易污染全局樣式，因此后來用原生table標簽完美解決樣式不可控問題。

1. 首先對于整體表格的列配置數(shù)據(jù)中有拆分的列進行添加split為true的屬性。

2.對于表格數(shù)據(jù)源進行子表格數(shù)據(jù)定義，也就是用數(shù)組的形式包含子表格數(shù)據(jù)

3.使用vue render函數(shù)動態(tài)渲染改造表格列結(jié)構(gòu)，通單元格渲染span標簽呈現(xiàn)數(shù)據(jù)，要拆分的單元格渲染原生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);
                                                  //更新數(shù)據(jù)
                                                  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) {
                // 單元格內(nèi)編輯
                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 {
                // 非單元格內(nèi)編輯
                  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.完美實現(xiàn)了單元格拆分為列的效果。