element-ui合并表格、表格内编辑、vue父组件向子组件传引用类型值问题解决

element-ui合并表格

需求：实现如下column合并的表格

后台获取到的数据结构是类似于

[{
		"id": "1",
		"list": [{
			"name": "249",
			"number1": "VI"
		},{
			"name": "249",
			"number1": "VI"
		}]
 },{
		"id": "3",
		"list": [{
			"name": "249",
			"number1": "VI"
		}]
 }]
           

而element-ui的官方文档开放出来的span-method方法

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
           

其中rowspan和colspan只能写死，不能动态获取值，无法满足需求。所以换一种思路，主要合并的是第一列，所以第一列可以作为最外层表格的单元格，后面几列都分别嵌套表格进去。代码如下：

<el-table
        :data="roomData"
        border>
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          label="姓名"
          class-name="column-cell">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.list"
              :show-header="false" <!--内嵌表格头不显示-->>
              <el-table-column
                prop="name">
                </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="数值1"
          class-name="column-cell">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.list"
              :show-header="false">
              <el-table-column>
                <template slot-scope="scope">
                <div v-if="editorNum">
                  <el-input size="mini" 
                  v-model="scope.row.editnumber1" 
                  placeholder="请输入分值"></el-input>
                </div>
                <div v-else>{{scope.row.number1}}</div>
              </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
       </el-table>
           

这就可以实现合并表格了，不过有几个样式的注意事项：

1.边框会出现重复，所以需要重置表格的border-collapse: collapse !important；

2.重置后内嵌表格的底部边框还会出现，所以需要通过class的:last-of-type选择器重置最后一个边框为0；

3.cell的padding需要重置。

表格内编辑

<el-table-column>
    <template slot-scope="scope">
        <div v-if="editorNum">
             <el-input size="mini" 
               v-model="scope.row.editnumber1" 
               placeholder="请输入分值"></el-input>
             </div>
        <div v-else>{{scope.row.number1}}</div>
    </template>
</el-table-column>
           

修改如果绑定的v-model=“scope.row.number1” ，那么在编辑过程中，还没有确认修改时，原来的值就会发生变化，解决方法是：另外定义一个值editnumber1存储修改数值，确认修改时，将editnumber1赋值给number1。

vue父组件向子组件传引用类型值

父组件向子组件传引用类型值时，子组件里改变值的时候，父组件的值会同步改变，解决该问题的方法是在传值之前将要传的值用另一个变量存起来，使用深拷贝或者浅拷贝，按需传值，可解决该问题。

欢迎大家讨论

转载请注明出处，谢谢！