html代碼如下：
<el-table
??????:data="tableBody"
??????border
??????class="tb-edit"
??????style="width:?100%"
??????ref="multipleTable"
??????@cell-dblclick="celldbClick"
??????@selection-change="rowStyleChange"
??????:row-class-name="rowClass"
??????@header-click="hendClick"
????>
??????<el-table-column?type="selection"?width="50"?fixed></el-table-column>
??????<el-table-column
????????v-for="(item,?index)?in?tableHeader"
????????:key="index"
????????header-align="center"
????????:label="item.headKey"
????????width="250"
????????:class-name="item.headKey+'?'+item.fieIdType"
??????>
????????<template?slot-scope="scope">
??????????<span
????????????v-if="!showEdit[scope.$index][item.headKey]&&item.fieIdType!='ElSelect'"
??????????>{{scope.row.fieldVal[item.headKey]}}</span>
??????????<el-input
????????????v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElInput'"
????????????@blur="inputBlur"
????????????:name="item.headKey"
????????????clearable
????????????v-model="scope.row.fieldVal[item.headKey]"
??????????></el-input>
??????????<span
????????????v-if="!showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElSelect'"
??????????>{{scope.row.fieldVal[item.headKey+'_NAME']}}</span>
??????????<el-select
????????????v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElSelect'"
????????????v-model="scope.row.fieldVal[item.headKey]"
????????????:name="item.headKey"
????????????collapse-tags
????????????style="margin-left:?20px;"
????????????placeholder="請選擇"
????????????@change="selchange(scope.row.fieldVal[item.headKey],item.headKey,scope.$index)"
??????????>
????????????<el-option
??????????????v-for="option?in?selList[item.headKey]"
??????????????:key="option.value"
??????????????:label="option.label"
??????????????:value="option.value"
????????????></el-option>
??????????</el-select>
??????????<el-input-number
????????????v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElInputNumber'"
????????????v-model="scope.row.fieldVal[item.headKey]"
????????????:min="0"
????????????label="描述文字"
????????????@change="numSum(scope.row.fieldVal,item.headKey)"
??????????></el-input-number>
????????</template>
??????</el-table-column>
????</el-table>
單元格中下拉框數據格式：
? ??//模擬數據
????????{
??????????value:?"10001",
??????????label:?"正常裝",
??????????subList:?[
????????????{?value:?"10001.001",?label:?"純新品",?subList:?[]?},
????????????{?value:?"10001.002",?label:?"新產品",?subList:?[]?},
????????????{
??????????????value:?"10001.003",
??????????????label:?"產品硬轉換",
??????????????subList:?[
????????????????{
??????????????????value:?"10001.003.001",
??????????????????label:?"有條形碼變化的硬轉換",
??????????????????subList:?[]
????????????????},
????????????????{
??????????????????value:?"10001.003.002",
??????????????????label:?"無條形碼變化的硬轉換",
??????????????????subList:?[]
????????????????}
??????????????]
????????????},
????????????{
??????????????value:?"10001.004",
??????????????label:?"產品軟轉換",
??????????????subList:?[
????????????????{
??????????????????value:?"10001.004.001",
??????????????????label:?"有首單日的軟轉換",
??????????????????subList:?[]
????????????????},
????????????????{
??????????????????value:?"10001.002",
??????????????????label:?"無首單日的軟轉換",
??????????????????subList:?[]
????????????????}
??????????????]
????????????},
????????????{
??????????????value:?"10001.005",
??????????????label:?"現有的產品改變上市范圍",
??????????????subList:?[]
????????????},
????????????{
??????????????value:?"10001.006",
??????????????label:?"停產并無新品代替",
??????????????subList:?[]
????????????}
??????????]
????????},
????????{
??????????value:?"10002",
??????????label:?"促銷裝",
??????????subList:?[
????????????{?value:?"10002.001",?label:?"純新品",?subList:?[]?},
????????????{?value:?"10002.002",?label:?"新產品",?subList:?[]?},
????????????{?value:?"10002.003",?label:?"產品軟轉換",?subList:?[]?},
????????????{
??????????????value:?"10002.004",
??????????????label:?"現有的產品改變上市范圍",
??????????????subList:?[]
????????????},
????????????{
??????????????value:?"10002.005",
??????????????label:?"現有產品重新上市",
??????????????subList:?[]
????????????},
????????????{
??????????????value:?"10002.006",
??????????????label:?"持續在賣且上配額的促銷裝",
??????????????subList:?[]
????????????},
????????????{
??????????????value:?"10002.007",
??????????????label:?"停產并無新品代替",
??????????????subList:?[
????????????????{?value:?"10002.008",?label:?"白夜",?subList:?[]?},
????????????????{?value:?"10002.009",?label:?"白夜2",?subList:?[]?}
??????????????]
????????????}
??????????]
????????}
methods:
? ? 主題思想主要是當表格渲染的同時，根據表頭返回的數據獲取所有的key，并且默認所有的key為false【不可編輯】，并用showEdit儲存；并且在watch下監聽表體數據tableBody,如果數據變化就從新渲染表格；
//初始化單元格狀態
????setShowEditInit()?{
??????for?(let?item?of?this.showEdit)?{
????????for?(let?subItem?in?item)?{
??????????item[subItem]?=?false;
????????}
??????}
????},
????setShowEdit()?{
??????let?tempShowEdit?=?[];
??????for?(let?item?of?this.tableBody)?{
????????let?tempShow?=?{};
????????for?(let?subItem?in?item.fieldVal)?{
??????????tempShow[subItem]?=?false;
????????}
????????tempShowEdit.push(tempShow);
??????}
??????this.showEdit?=?tempShowEdit;
????},
????//循環查找對應的下拉框
????cycleSearch(currefieId,?curreval)?{
??????let?objitem?=?[];
??????if?(currefieId?!=?"STEP1")?{
????????let?ptypeItem?=?this.cachePnameList.find(
??????????item?=>?item.value?==?curreval
????????);
????????if?(ptypeItem)?{
??????????this.selList[currefieId]?=?ptypeItem.subList;
????????}?else?{
??????????let?ptype?=?this.subcycle(curreval,?this.cachePnameList);
??????????this.selList[currefieId]?=?ptype.subList;
????????}
??????}?else?{
????????this.selList[currefieId]?=?this.cachePnameList;
??????}
????},
????//循環查找對應的值
????subcycle(subval,?subItem)?{
??????let?options?=?this.cachePnameList;
??????let?obj?=?"";
??????for?(let?i?=?0;?i?<?options.length;?i++)?{
????????let?refs?=?this.findcycle(subval,?options[i]);
????????if?($.isPlainObject(refs))?{
??????????obj?=?refs;
??????????break;
????????}?else?{
??????????continue;
????????}
??????}
??????return?obj;
????},
????findcycle(subval,?option)?{
??????let?subVal?=?option.subList.find(subItem?=>?{
????????if?(subItem.value?!=?subval)?{
??????????this.findcycle(subval,?subItem);
????????}?else?{
??????????return?subItem;
????????}
??????});
??????return?subVal;
????},
????callback(row,?cellIndex)?{
??????//獲取當前行所有的key
??????--cellIndex;
??????let?call_key?=?Object.keys(row.fieldVal)[cellIndex];
??????if?(row.fieldVal[call_key]?==?"")?{
????????return?this.callback(row,?cellIndex);
??????}?else?{
????????return?row.fieldVal[call_key];
??????}
????},
????//?切換單元格為編輯
/*當用戶雙擊某一個單元格的時候先找到對應列的key,根據得到的key去showEdit中去匹配key對應的值是否為true*/
????celldbClick(row,?column,?cell,?event)?{
??????//判斷點擊的是否為下拉框
??????let?name?=?column.className.split("?");
??????//首先判斷該單元格是否可編輯
??????if?(!row.subList[name[0]])?{
????????this.$message({?message:?"該單元格屬性不允許編輯",?type:?"warning"?});
????????return;
??????}
??????if?(name[1]?==?"ElSelect")?{
????????let?parval?=?"";
????????//獲取當前列的索引
????????let?cellIndex?=?cell.cellIndex;
????????if?(name[0]?!=?"STEP1")?{
??????????parval?=?this.callback(row,?cellIndex);
????????}
????????//單元格的類型
????????this.cycleSearch(name[0],?parval);
????????//表示每一列的名稱this.selList[name[0]]
??????}
??????this.setShowEditInit();
??????let?newObj?=?column.label;
??????let?index?=?this.tableBody.findIndex(
????????item?=>?item.fieldVal.Id?==?row.fieldVal.Id
??????);
??????this.showEdit[index][newObj]?=?!this.showEdit[index][newObj];
????},
????handleEdit(row,?index)?{
??????this.tableBody[index]?=?row;
????},
/*后臺傳入的表格數據分為表體projectList，表頭headData*/
