1

所以我在渲染内容可编辑单元格时遇到了这个问题，这让我发疯了。我有这样的 b 表

<b-table 
  v-once
  v-if="showTable" 
  :small="true"
  :items="timeSerres" 
  :fields="timeSerriesX"                                
  :primary-key="timeSerriesX[0].key"
  striped hover responsive selectable   
  @focusout.native="editCell"              
>  
</b-table>

我正在设置：像这样的字段

this.timeSerriesX[j]={
 key:'t-'+diff.toString(), 
 label:this.$moment(this.endDate).add(-diff, 'M').format('MMM-YY'),     
 tdAttr:{contenteditable:true}            
}

我正在设置：项目，像这样

this.rowText.split('\t').reverse().forEach(function(element,i_) {                    
 row['t-'+i_]=element
});

this.timeSerres.push(row);
为了检测编辑，我捕获了 focusout 本机事件并像这样处理它

editCell(event)      
{ 
  var row_index = event.target.parentNode.rowIndex-1
  var cell_index = event.target.cellIndex;        
  var newValue = event.target.innerText;                      

  var row = this.timeSerres[row_index]
  var key = this.timeSerriesX[row_index].key;
  row[key]=newValue;
  
  this.$set(this.timeSerres,this.rowIndex,row);  
},

这种方法可以正常工作，直到我遇到极端情况。当单元格最初为空时，然后我将数据输入到表格单元格中，当焦点离开时，输入将被渲染两次。例如点击空单元格，输入“ 1 ”然后将焦点移出浏览器将实际呈现“ 11 ”；或者点击空单元格，输入“ ab ”然后聚焦浏览器将实际呈现“ abab ”

请帮忙！

4

0 回答 0