el-tableのデータが変更されたのに、ページに表示されるデータが更新されない問題を解決

 Vueにおけるキーの役割について

key の特別な属性は、主に Vue の仮想 DOM アルゴリズムで、古いノードと新しいノードを比較するときに vnode を識別するために使用されます。

キーを使用しない場合、Vue は動的要素を最小限に抑えるアルゴリズムを使用し、同じタイプの要素を可能な限りその場で変更/再利用しようとします。

キーを使用すると、キーの変更に基づいて要素の順序が並べ替えられ、キーが存在しない要素は削除されます。

同じ親を持つ子要素には一意のキーが必要です。キーが重複するとレンダリング エラーが発生します。

したがって、テーブルにバインドされたキー値を変更することで、el テーブルの再レンダリングをトリガーできます。まず、テーブルにキーをバインドします。

   <el-table
          :data="tableData"
          border
          height="600"
          :key="rendertable"            ——————给table绑定一个key
        >
          <el-table-column label="菜单" align="center">
            <template slot-scope="scope">
              <span class="bold">{
   
   { scope.row.name }}</span>
            </template>
          </el-table-column>
        </el-table>

データが変更された後、キーの値を更新します。

async  updataTableData(){
    const res=await api.menu.tableData()
    this.tableData=res.result             //数据更新
    this.rendertable=!this.rendertable   //更新key的值
    },