html代码如下：
:data="tableBody" border class="tb-edit" style="width: 100%" ref="multipleTable" @cell-dblclick="celldbClick" @selection-change="rowStyleChange" :row-class-name="rowClass" @header-click="hendClick" > v-for="(item, index) in tableHeader" :key="index" header-align="center" :label="item.headKey" width="250" :class-name="item.headKey+' '+item.fieIdType" > v-if="!showEdit[scope.$index][item.headKey]&&item.fieIdType!='ElSelect'" >{{scope.row.fieldVal[item.headKey]}} v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElInput'" @blur="inputBlur" :name="item.headKey" clearable v-model="scope.row.fieldVal[item.headKey]" > v-if="!showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElSelect'" >{{scope.row.fieldVal[item.headKey+'_NAME']}} 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)" > v-for="option in selList[item.headKey]" :key="option.value" :label="option.label" :value="option.value" > 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)" > 单元格中下拉框数据格式： //模拟数据 { 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*/
