elementUI——table空單元格自動填充占位符，編輯后數據更新視圖未更新問題

參考：element table 數據改變列表更新_xionggd-CSDN博客_element table 刷新

　　ElTable實現空單元格自動填充占位符_CSU_Zipple的博客-CSDN博客

 

我的情況：通過js實現空單元格自動填充空占位符'—'。但發現編輯后，單元格值改變，卻仍有之前的占位符

js:

export const fillEmptyColumn = (table) => {
  if (!table || !table.classList.contains('table')) {
    return;
  }
  // 如果 列表 el-table 有 show-empty-column class 不做空值替換成 — 處理
  if (table.classList.contains('show-empty-column')) {
    return;
  }
  // 查詢 所有 非 操作列 和 沒有 show-empty-column class 的 單元格
  table.querySelectorAll('td').forEach((td) => {
    if (
      td.classList.contains('operate-column') ||
      td.classList.contains('show-empty-column')
    ) {
      return;
    }
    let cell = td.querySelector('.cell');
    // 如果單元格中有 input button select 輸入控件
    if (cell.querySelector('input,button,select')) {
      return;
    }
    if (!cell.innerText) {
      cell.innerText = '—';
    }
  });
};

 

編輯前：

 

編輯后：

 

 

 

 

 

解決方法：

給table添加key屬性，編輯后修改key的值，讓其視圖更新

 

// 注意：這段代碼需放在調用格式化方法之前，否則格式化無效
if(this.$refs['table']){
    this.$refs['table'].tableKey = Math.random(); 
}