table合并列，一对多的展示。

table合并列的操作

数据类型,合并的部分是在对象里的。

list: [
 {
   name: '1',
   twoList: [
   	 {name: '1.1'},
   	 {name: '1.2'}
   ]
 }
]

html部分代码

		<template>
		  <div style="width 100%;">
          <table class="cus-table-box cus-table-sort" :style="{paddingRight: '16px', background: '#f4f4f4'}" cellspacing='0' cellpadding="0" style="width 100%;">
            <thead>
              <th v-for="(item, index) in theadList" :key="index" :style="`width:${item.widthNum}`" :class="item.activeClass">
                <span>{{item.name}}</span>
                <TooltipComm v-if="item.tooltipStr" :txt='item.tooltipStr' style="display:inline-block"/>
                <span class="caret-wrapper" v-if="item.sort">
                  <i class="sort-caret ascending"  @click="columnSort('asc', item)"></i>
                  <i class="sort-caret descending" @click="columnSort('desc', item)"></i>
                </span>
              </th>
            </thead>
          </table>
        </div>
        <div class="table-scrollHeight-box" :style="{overflowY: 'scroll', height: 'calc(100vh - 310px)'}"> 
          <table class="cus-table-box" style="margin-top: -31px;border-right:0px" cellspacing='0'  cellpadding="0">
            <thead style="height:1px;opacity: 0">
              <th v-for="(item, index) in theadList" :key="index" :style="`width:${item.widthNum}`" :class="item.activeClass">
                <span>{{item.name}}</span>
              </th>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.oneCode}}</td>
                    <td>{{item.oneValue}}</td>
                    <td>{{item.oneOptStatusTxt}}</td>
                    <td colspan="4" style="padding:0px;border-right: 0px;">
                        <table style="width: 100%;table-layout: fixed"  cellspacing='0'>
                            <tbody :key="item.twoList.length">
                                <tr v-for="(ite, indexs) in item.twoList" :key="indexs">
                                    <td :style="{width: '23%',borderBottom: indexs == item.twoList.length-1? '0px' : '1px solid #EBEEF5;'}">
                                        {{ite.twoCode}}
                                    </td>
                                    <td :style="{width: '22.7%',borderBottom: indexs == item.twoList.length-1? '0px' : '1px solid #EBEEF5;'}">
                                        {{ite.twoValue}}
                                    </td>
                                    <td :style="{width: '22.7%',borderBottom: indexs == item.twoList.length-1? '0px' : '1px solid #EBEEF5;'}">
                                        {{ite.twoOptStatusTxt}}
                                    </td>
                                    <td :style="{width: '5.4%',borderBottom: indexs == item.twoList.length-1? '0px' : '1px solid #EBEEF5;'}">
                                        <PermissionBtnDie
                                            type="bankAndBranch"
                                            :isTable="true"
                                            :parentRow="item"
                                            :row="ite" 
                                            :menuList="menuList"
                                            @editAndDetails="editAndDetails">
                                        </PermissionBtnDie>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
          </table>
        </div>
       </template>
      <script>
      	data () {
      	  return {
      	    // widthNum：宽度，sort：是否排序 ，prop：排序字段（后端排序）activeClass：排序的三角
      	  	theadList: [
              {name: '序号', widthNum: '2%', sort: false, prop:'', },
              {name: '一级类型编码', widthNum: '12%', sort: true, prop:'oneCode', activeClass: ''},
              {name: '一级类型名称', widthNum: '12%', sort: true, prop:'oneValue', activeClass: '', tooltipStr: '一级状态为禁用时：FMS-【非供应链资金计划】-【新增】-资金计划类型中将不显示。'},
              {name: '一级状态', widthNum: '10%', sort: true, prop:'oneOptStatusTxt', activeClass: ''},
              {name: '二级类型编码', widthNum: '10%', sort: false, prop:''},
              {name: '二级类型名称', widthNum: '10%', sort: false, prop:''},
              {name: '二级状态', widthNum: '10%', sort: false, prop:'', tooltipStr: '二级状态全为禁用时，对应的一级状态自动变更为禁用，同时【非供应链资金计划】-【新增】时资金计划类型中将不显示。'},
              {name: '操作', widthNum: '3%', sort: false, prop:''},
            ],
      	  }
      	},
      	  methods: {
             // element的表格排序
             sortMixincolumn(column){
               const { col, order, prop } = column;
               this.searchForm.sortName = prop;
               this.searchForm.sortOrder = order?order==='descending'?'desc':'asc':'';
               this.search();
               console.log(order, prop);
              },
          // 自定义的合并表格排序
          columnSort (sortType, item) {
             let str = sortType + 'ending';
             let sortTypeCopy = sortType;
             this.theadList.forEach(ite => {
                if (ite.name == item.name) {
                   if (ite.activeClass == str) {
                      ite.activeClass = '';
                      sortTypeCopy = '';
                   } else {
                     ite.activeClass = str;
                }
             } else {
               ite.activeClass = '';
             }
          });
         this.searchForm.sortName = item.prop;
         this.searchForm.sortOrder = sortTypeCopy;
         this.searchEvent();
        },
      }
      </script>

css部分代码

.cus-table-box {
    border: 1px solid #EBEEF5;
    position: relative;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    max-width: 100%;
    color: #303133;
    font-size: 12px;
    th {
        border-bottom: 1px solid #EBEEF5;
        border-right: 1px solid #EBEEF5;
        height: 31px;
        background: #f4f4f4;
        white-space: nowrap;
        padding: 0 20px;
        text-align: left;
        padding: 0 10px;
        color: #606266;
        // box-sizing: border-box;
    }
    .thead-tr {
        th:last-child {
            width: 180px!important;
        }
    }
    td {
        text-align: center;
        height: 31px;
        border-bottom: 1px solid #EBEEF5;
        word-wrap: break-word;
        padding: 0px 10px;
        color:#252525!important;
        border-right: 1px solid #EBEEF5;
        // box-sizing: border-box;
    }
    .cus-table-box th,td {
        text-align: left;
    }
    td :last-child {
      border-right: none!important;
    }
}
// 自定义表格的排序问题
.cus-table-sort {
  .caret-wrapper {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 34px;
    width: 24px;
    vertical-align: middle;
    cursor: pointer;
    overflow: initial;
    position: relative;
  }
  .sort-caret {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    position: absolute;
    left: 7px;
  }
  .sort-caret.ascending {
      border-bottom-color: #C0C4CC;
      top: 5px;
  }
  .sort-caret.descending {
      border-top-color: #C0C4CC;
      bottom: 7px;
  }
  .ascending .sort-caret.ascending {
      border-bottom-color: #409EFF;
  }
  .descending .sort-caret.descending {
      border-top-color: #409EFF;
  }
}

排序合并项的宽度还是很不好处理，都是肉眼对的，无法兼容很多浏览器。