我有一个带有层次结构的表。当我尝试使用“ array.splice”删除其中一个子级时,VUE不会被动地删除其Dom结构。有人遇到过这个吗?有什么解决方案?
通过表c网站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
答案 0 :(得分:0)
element-ui内部处理数据的方式似乎有问题。直接修改嵌套数据时,不会重新呈现表。 (但是数据确实正确地突变了,正如在this.tableData
之后登录splice()
所看到的那样。)
它有助于创建tableData的副本(如果您希望支持较旧的浏览器,则可能需要Array.from()
的变通方法/填充),对其进行修改并将tableData设置为变异的副本。
(在全屏模式下打开片段,单击两次按钮,或在单击按钮之前展开子级,因为默认情况下这些子级处于折叠状态,然后重新渲染。)
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>