动态表格定制化table element

项目背景：vue+elementUI

table每行数据 上有一行 当前数据解读 有点类似el-table里面的展开行 但是还是有区别的

//数据结构  数据结构可能根据本人的需求调整 
 tableData:[{
		 date: '2016-05-02',
		 name: '王小虎',
		 address: '上海市普陀区金沙江路 1518 弄',
		 addressss: '上海市普陀区金沙江路 1518 弄',
	 }, {
		 date: '2016-05-04',
		 name: '王小虎',
		 address: '上海市普陀区金沙江路 1517 弄',
		 addressss: '上海市普陀区金沙江路 1518 弄',
	 }, {
		 date: '2016-05-01',
		 name: '王小虎',
		 address: '上海市普陀区金沙江路 1519 弄',
		 addressss: '上海市普陀区金沙江路 1518 弄',
	 }, {
		 date: '2016-05-03',
		 name: '王小虎',
		 address: '上海市普陀区金沙江路 1516 弄',
		 addressss: '上海市普陀区金沙江路 1518 弄',
	 }]

实现需求的方式往往不只有一个，有兴趣的小伙伴可以试试多种方式实现，欢迎来骚扰小编

小编实现的方式是 使用原生的th标签 借用element table的标签样式 来实现的

<table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 1076px;font-size:12px">
              <thead class="has-gutter">
                <tr class="">
                  <th colspan="1" rowspan="1" class="el-table_2_column_5 is-leaf"><div class="cell">日期</div></th>
                  <th colspan="1" rowspan="1" class="el-table_2_column_6 is-leaf"><div class="cell">姓名</div></th>
                  <th colspan="1" rowspan="1" class="el-table_2_column_7 is-leaf"><div class="cell">姓名</div></th>
                  <th colspan="1" rowspan="1" class="el-table_2_column_8 is-leaf"><div class="cell">操作</div></th>
                  <th class="gutter" style="width: 0px; display: none;"></th>
                  </tr>
              </thead>
              <tbody>
                <template v-for="(i,index) in tableData" >
                  <tr class="el-table__row" :key="index" style="height:35px;text-align:left">
                    <td rowspan="1" colspan="5" class="el-table_3_column_9  "><div class="cell">
                        <div class="spanitem" style="display: flex;">
                          <div style="width: 25%;">2016-05-02</div>
                          <div style="width: 25%;">王小虎</div>
                          <div style="width: 25%;">上海市普陀区金沙江路 1518 弄</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr class="el-table__row" :key="index+i.date" style="height:70px;text-align:center">
                    <td rowspan="1" colspan="1" class="el-table_4_column_13  "><div class="cell"><div ><i  class="el-icon-time"></i><span style="margin-left: 10px;">2016-05-04</span></div></div></td>
                    <td rowspan="1" colspan="1" class="el-table_4_column_14  "><div class="cell"><span class="el-tag el-tag--medium el-tag--light">王小虎</span></div></td>
                    <td rowspan="1" colspan="1" class="el-table_4_column_15  "><div class="cell"><span class="el-tag el-tag--medium el-tag--light">上海市普陀区金沙江路 1518 弄</span></div></td>
                    <td rowspan="1" colspan="1" class="el-table_4_column_16  "><div class="cell"><button type="button" class="el-button el-button--default el-button--mini"><span>编辑</span></button></div>
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>

/*用来覆盖 element的自带样式*/
/deep/ .el-table__row:nth-child(odd){
  padding: 0;
  background-color: #f5f7fa;
}
/deep/ .el-table__row:nth-child(odd) td{
  padding: 0;
}
/deep/ .el-table__row:nth-child(even)::hover{
  background-color: #fff;
}