Question

所以我在呈现可编辑内容的单元格时遇到了这个问题，这使我发疯。我有这样的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>

我正在设置：fields

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

我正在设置：item，就像这样

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

this.timeSerres.push(row);

为了检测编辑，我捕获了聚焦本机事件并像这样处理它

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 ”

请帮助！

在bootstrap-vue b表中正确捕获内容可编辑<td>的chagnes

0 个答案: