Vue Array.splice() 不会删除 element-ui table 中的 DOM 元素

Question

我有一个具有层次结构的 table。当我尝试删除其中一个具有 "array.splice" 的子项时，VUE 不会反应性地删除其 Dom 结构。有人遇到过这个吗？解决方案是什么？

通过tablec站点Vuejs

的例子复现了这个问题

var Main = {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: 'wangxiaohu'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'wangxiaohu'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'wangxiaohu',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: 'wangxiaohu'
            }, {
              id: 32,
              date: '2016-05-01',
              name: 'wangxiaohu'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'wangxiaohu'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: 'wangxiaohu'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'wangxiaohu'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'wangxiaohu',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'wangxiaohu'
        }]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: 'wangxiaohu'
          }, {
            id: 32,
            date: '2016-05-01',
            name: 'wangxiaohu'
          }
        ])
      },
      removeRow(row){
        this.tableData[2].children.splice(0,1);
        //this.tableData.splice(0,1);
      }
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<div id="app">
<template>
<div>
  <el-button @click="removeRow">
    Delete child
  </el-button>
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    border
    row-key="id">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="name"
      sortable
      width="180">
    </el-table-column>
  </el-table>

  <el-table
    :data="tableData1"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    >
    <el-table-column
      prop="date"
      label="date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="name"
      width="180">
    </el-table-column>
  </el-table>
</div>
</template>
</div>

我正在使用 Vue 2.6.10 和 element-ui 2.7.0

Answer 1

这似乎是 element-ui 在内部处理数据的方式的问题。直接修改嵌套数据时，table 不会重新呈现。（但是数据确实被正确地变异了，正如在 splice() 之后记录 this.tableData 时可以看到的那样。）

它有助于创建 tableData 的副本（如果你想支持旧浏览器，你可能需要 workaround/polyfill for Array.from()），修改它并设置table变异副本的数据。

（在全屏模式下打开截图并点击按钮两次，或者在点击按钮之前展开子项，因为子项在默认情况下会折叠并在重新渲染后。）

var Main = {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: 'wangxiaohu'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'wangxiaohu'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'wangxiaohu',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: 'wangxiaohu'
            }, {
              id: 32,
              date: '2016-05-01',
              name: 'wangxiaohu'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'wangxiaohu'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: 'wangxiaohu'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'wangxiaohu'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'wangxiaohu',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'wangxiaohu'
        }]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: 'wangxiaohu'
          }, {
            id: 32,
            date: '2016-05-01',
            name: 'wangxiaohu'
          }
        ])
      },
      removeRow(row){
        var newTableData = Array.from(this.tableData);
        newTableData[2].children.splice(0,1)
        this.tableData = newTableData;
        //this.tableData.splice(0,1);
      }
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<div id="app">
<template>
<div>
  <el-button @click="removeRow">
    Delete child
  </el-button>
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    border
    row-key="id">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="name"
      sortable
      width="180">
    </el-table-column>
  </el-table>

  <el-table
    :data="tableData1"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    >
    <el-table-column
      prop="date"
      label="date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="name"
      width="180">
    </el-table-column>
  </el-table>
</div>
</template>
</div>

Vue Array.splice() 不会删除 element-ui table 中的 DOM 元素

Vue Array.splice() doesn't remove DOM element in element-ui table

javascript

arrays

splice

vue.js

element-ui