由于業(yè)務(wù)場(chǎng)景的復(fù)雜性，需實(shí)現(xiàn)：在 el-table 表格中 嵌入 el-checkbox 多選框 及 el-input 輸入框 及 el-upload 上傳組件 ，先附上實(shí)現(xiàn)效果圖。

從圖片可以看出其實(shí)就是一個(gè)規(guī)格可以帶有多個(gè)屬性的規(guī)格表，實(shí)現(xiàn)此效果需涉及到的知識(shí)點(diǎn)大概有以下：

1. 阻止冒泡
2. this.$set() 動(dòng)態(tài)綁定
3. 圖片上傳，預(yù)覽
4. Scoped slot 獲取到 table 內(nèi)部的狀態(tài)管理數(shù)據(jù)
5. …

首先搭建表格框架（固定兩列），這個(gè)比較簡(jiǎn)單

<el-table>
	<el-table-column
         prop=""
         label="規(guī)格"
         width="220px">
    </el-table-column>
    <el-table-column
         prop=""
         label="屬性"
         width="660px">
    </el-table-column>
</el-table>

由于行數(shù)不固定，行內(nèi)容非普通的靜態(tài)數(shù)據(jù)展示，故需用到 slot 來(lái)自定義

:data 屬性綁定 commodityPropertyList數(shù)據(jù)，scope 獲取 row, column, $index 和 store 等的表格內(nèi)部數(shù)據(jù)

實(shí)現(xiàn)表格第一列

<el-table
	:data="commodityPropertyList"
	style="width: 100%"
	>
	<el-table-column
         prop=""
         label="規(guī)格"
         width="220px">
         	<template slot-scope="scope">
         		<span style="font-size: 14px;">{{scope.row.propertyName}}</span><i style="margin-left: 10px;" class="el-icon-delete" @click="deleteProperty(scope)" ></i>
         		<div style="display: flex;align-items: center;cursor: pointer;" class="property" @click="changeGPicFlag(scope)">
         			<i  v-if="scope.row.gPicFlag == 1" class="el-icon-circle-check"></i>
         			<i class="el-icon-circle-close" v-else></i>
         			<div>開(kāi)啟圖片上傳</div>
         		</div>
         	</template>
    </el-table-column>
    <el-table-column
         prop=""
         label="屬性"
         width="660px">
    </el-table-column>
</el-table>

補(bǔ)充表格第二列

<el-table
	:data="commodityPropertyList"
	style="width: 100%"
	>
	<el-table-column
         prop=""
         label="規(guī)格"
         width="220px">
         	<template slot-scope="scope">
         		<span style="font-size: 14px;">{{scope.row.propertyName}}</span><i style="margin-left: 10px;" class="el-icon-delete" @click="deleteProperty(scope)" ></i>
         		<div style="display: flex;align-items: center;cursor: pointer;" class="property" @click="changeGPicFlag(scope)">
         			<i  v-if="scope.row.gPicFlag == 1" class="el-icon-circle-check"></i>
         			<i class="el-icon-circle-close" v-else></i>
         			<div>開(kāi)啟圖片上傳</div>
         		</div>
         	</template>
    </el-table-column>
    <el-table-column
         prop=""
         label="屬性"
         width="660px">
         	<template slot-scope="scope">
         		<el-checkbox-group v-model="checkPropertyList">
         			<el-checkbox v-for="(item1,index) in scope.row.options"   :label="item1" :key="item1.id" :disabled="pageType == 'view'">
         				<div  style="display: flex;justify-content: center;align-items: center;margin-bottom: 20px;">
         					<div style="width: 50%;font-size: 14px;">{{item1.optionValue}}</div>
         					<el-input :disabled="pageType == 'view'" style="margin-right: 20px;" size="mini" v-model="item1.optionAlias" placeholder="備注(可選)"></el-input>
         					<el-input :disabled="pageType == 'view'" size="mini" v-model="item1.optionSort" placeholder="排序，輸入數(shù)字"></el-input>
         					<span v-if="scope.row.gPicFlag == 1" style="margin-left: 20px;">
         						<div v-if="item1.gPicUrl" style="display: inline;">
         							<el-image ref="preview2"  :preview-src-list="[showgPicUrl]" style="width: 20px;height: 20px;" :src="item1.gPicUrl"></el-image>
         							<i @click.stop.prevent="deleteImage(scope,index)" v-if="pageType != 'view'"  style="margin-left: 10px;font-size: 12px;" class="el-icon-delete" ></i>
         							<i style="margin-left: 10px;font-size: 12px;" @click.stop.prevent="previewImage2(scope,index)" class="el-icon-view"></i>
         						</div>
         						<el-upload v-show="!item1.gPicUrl && pageType != 'view'" ref="upload" class="insert-block" 
                                      style="display: inline-block; vertical-align: top; margin-right: 8px;"
                                       action="/api/mdm/upload/image" :limit="1"  accept=".jpg,.jpeg,.png"  
                                       :on-success="handleSuccess2" :on-error="handleFormatError"
                                          :file-list="imgFilesListOfOnce" :show-file-list="false">
                                           <i slot="default" @click.stop.prevent="uploadImage(scope,index)" class="el-icon-upload2"></i>
                                 </el-upload>
                                 <span>尺寸：800*800px，最多1張</span>
         					</span>
         				</div>
         			</el-checkbox>
         		</el-checkbox-group>
         	</template>
    </el-table-column>
</el-table>

到此，表格的頁(yè)面及樣式已基本完成，接下來(lái)還需處理事件邏輯。

表格第一列事件處理

changeGPicFlag(scope) {
     if(this.pageType == 'view') {
          return
      }
     this.commodityPropertyList.forEach((item,index) => {
          if(index == scope.$index) {
               item.gPicFlag = item.gPicFlag == 1 ? 0 : 1
          }
      })
          this.commodityPropertyList = [...this.commodityPropertyList]
               
}

表格第二列事件處理

deleteImage(scope,index) {
          this.commodityPropertyList[scope.$index].options[index].gPicUrl = ""
          this.commodityPropertyList = [...this.commodityPropertyList] //實(shí)時(shí)更新修改的數(shù)據(jù)
},

previewImage2(scope,index) {
      this.showgPicUrl = this.commodityPropertyList[scope.$index].options[index].gPicUrl
      this.$refs.preview2[0].showViewer = true
},

uploadImage(scope,index) {
      let num = 0
      let list = []
      list = this.commodityPropertyList.filter((item,index) => index < scope.$index)
      list.forEach(item => { num += item.options.length})
       //阻止冒泡到選checkbox
      this.upload2Flag.propertyIndex = scope.$index
      this.upload2Flag.optionsIndex = index
      this.$refs['upload'][num+index].$refs['upload-inner'].handleClick()
},

表格“屬性”列由 多選框checkbox、輸入框input、 圖片上傳upload 等組件組成，從代碼可看出 checkbox-group 包裹 input等組件，所以當(dāng)在輸入框輸入或點(diǎn)擊上傳圖片等操作時(shí)，都會(huì)觸發(fā)勾選/取消勾選多選框。這效果不是我們想要的，我們只是想操作上傳圖片，所以需要在定義事件時(shí)加 @click.stop.prevent = 事件名 來(lái)阻止冒泡（阻止觸發(fā)勾選操作）

于是又有問(wèn)題出現(xiàn)了，當(dāng)在 el-upload 組件加上 @click.stop.prevent = 事件名 時(shí)，你會(huì)發(fā)現(xiàn)，操作點(diǎn)擊時(shí)不會(huì)觸發(fā)彈出選擇文件窗口，這是因?yàn)榧恿俗柚姑芭莺鬀](méi)有觸發(fā)到選擇文件的操作，這就需要我們自己在事件處理中寫(xiě)邏輯去觸發(fā)。

1.需要在 el-upload 組件定義 ref
2.用 index 結(jié)合 num 找出被點(diǎn)擊的那個(gè) el-upload 組件

    uploadImage(scope,index) {
       let num = 0
       let list = []
       list = this.commodityPropertyList.filter((item,index) => index < scope.$index)
       list.forEach(item => { num += item.options.length})
         //阻止冒泡到選checkbox
       this.upload2Flag.propertyIndex = scope.$index
       this.upload2Flag.optionsIndex = index
       this.$refs['upload'][num+index].$refs['upload-inner'].handleClick()//觸發(fā)選擇文件的彈窗
 },

在實(shí)現(xiàn)的過(guò)程中，我還碰到一個(gè)輸入框不能輸入的問(wèn)題，我操作輸入之后，沒(méi)有動(dòng)靜，再點(diǎn)擊勾選操作時(shí)就可以正確顯示出來(lái)了。于是我猜想了很多種可能并一一去驗(yàn)證
1.el-checkbox 不能包裹其他標(biāo)簽？（從網(wǎng)上搜集到很少有這樣復(fù)雜地使用多選框）
2.沒(méi)有加 slot-scope="scope" ?
…

最后在控制臺(tái)打印后端返回的 commodityPropertyList 數(shù)據(jù)中發(fā)現(xiàn)，其 options 數(shù)組下沒(méi)有 optionAlias 和 optionSort 字段，需要前端這邊自己加，最開(kāi)始我是這樣加的

//在commodityPropertyList獲取數(shù)據(jù)的地方
......
this.commodityPropertyList.forEach((group) => {
      if (group.options && group.options.length) {
             group.options.forEach((item) => {
                 item.optionAlias = ""
				 item.optionSort = ""
                  var key = item.propertyCode + ":" + item.optionCode
                  var prop = this.propSpenMap.get(key)
                     if (prop) {
                           group.gPicFlag = prop.gPicFlag == 1 ? 1  : 0    
                           propList.push(prop)
                           this.checkPropertyList.push(item)
                     }
             })
        }
})

最后發(fā)現(xiàn)還是不可以，于是我嘗試 this.$set() 就可以了，是因?yàn)?v-model 需要雙向綁定，而 this.$set() 則是啟用了動(dòng)態(tài)綁定

將上面代碼的
item.optionAlias = ""
item.optionSort = ""

改成
this.$set(item,'optionAlias',"")
this.$set(item,'optionSort',"")