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

zmxyzmxy1234發表於2020-06-24

搭建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 協議》,轉載必須註明作者和本文連結

相關文章