Element-ui table splice 移除陣列元素 頁面只會刪除最後一行 檢視和資料不對等

zmxyzmxy1234發表於2020-06-24
UI陣列

搭建Vue後臺，用了vue-element-admin開源專案，裡面的Element-ui table表格刪除元素檢視更新有誤 

<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
    <el-table-column align="center" label="Actions" width="120">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteList(scope.row.id, scope.$index)" />
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
</el-table>

這裡我要刪除操作，移除一行陣列，於是獲得了id和陣列index

deleteList(id, index) {
  console.log(index)
  this.list.splice(index, 1)
}

操作完後，list陣列是移除正確的，但是檢視上把表格最後一行移除了，我很奇怪，難道element-ui的table遍歷的陣列物件不是我傳遞的list？不管我刪除哪一個，檢視上照樣刪除最後一行，甚至我重新呼叫介面賦值list也不行，檢視和資料不對等

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章