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父元件向子元件傳引用類型值

父元件向子元件傳引用類型值時，子元件裡改變值的時候，父元件的值會同步改變，解決該問題的方法是在傳值之前将要傳的值用另一個變量存起來，使用深拷貝或者淺拷貝，按需傳值，可解決該問題。

歡迎大家讨論

轉載請注明出處，謝謝！