Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article directory
foreword
See if the title is a bit confusing. The requirement here is to use the lazy loading of el-table. After loading the data, when modifying the lazy loaded data, the global refresh will not be performed, but only the current lazy loaded data will be operated.比如一级是真实的数据，二级是懒加载的数据，当二级的某条数据进行了修改后，只让当前的二级菜单重新向后台请求数据，进行刷新得到最新的数据
1. Enable lazy loading in el-table
Supports the display of tree-type data. When row contains children fields , it is regarded as tree data. When rendering tree data, it must be specified row-key. Support child node data asynchronous loading. Set the Table lazyproperty to true and load the function load. Specify which rows contain child nodes by specifying hasChildrenthe field . childrenBoth hasChildrencan be tree-propsconfigured .
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
thisTabeDom: Object,
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
pid: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
pid: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
}, 1000)
}
},
}
</script>
Second, carry out transformation
1. Add global variables in data
The code is as follows (example):
export default {
data() {
return {
// 存储操作的DOM数据
thisTabeDom: Object,
tableData: [{
}]
}
}
}
thisTabeDom2. Assign a value in the corresponding operation
The code is as follows (example):
<el-button
icon="el-icon-edit"
type="primary"
size="mini"
@click="handleDialogForm(scope)">
编辑
</el-button>
<!-- 编辑/新增弹出框 -->
<dialog-formBox :visible.sync="dialogFormVisible" :menuInrForm="this.menuForm" @addCallback="tabeDomCallback"></dialog-formBox>
/**
* 新增、编辑
*/
handleDialogForm(box) {
// 将操作的scope保存在全局变量中
this.thisTabeDom = box
console.log(box);
if (box.row && box.row.id) {
this.menuForm = {
...box.row };
} else {
this.menuForm = {
};
}
// 显示el-dialog对话框进行数据修改操作
this.dialogFormVisible = true;
},
3. Write the callback methodtabeDomCallback
The code is as follows (example):
// 修改回调
tabeDomCallback(val) {
console.log(val);
console.log(this.thisTabeDom.row);
var states = this.thisTabeDom.store.states
var treeData = states.treeData
// 判断获取的ID是父ID还是当前ID
let id = val ? this.thisTabeDom.row.id : this.thisTabeDom.row.pid
let data = treeData[id]
let teb = 'loaded' in data
// 如果对象中没有loaded字段，则表示修改的数据不是懒加载的
if (!teb) {
// 调用列表刷新
this.getList()
console.log('回调结束,刷新列表');
return
}
// 将懒加载数据标志改为false
treeData[id].loaded = false
// 调用组件内部的方法加载数据 间接调用懒加载方法
this.thisTabeDom.store.loadOrToggle({
id})
console.log('回调结束,刷新DOM');
},
4. Method callback after dialog box operation
The code is as follows (example):
/**
* 确认提交
*/
confirm() {
this.$refs.menuForm.validate(async (valid) => {
if (valid) {
//编辑
if (this.menuForm && this.menuForm.id) {
await organApi.update({
id: this.menuForm.id,
name: this.menuForm.name,
});
// 回调，false 表示通过父ID懒加载子节点
await this.$emit("addCallback", false);
this.$message.success("修改成功");
} else {
//新增
await organApi.add({
name: this.menuForm.label,
pid: this.menuForm.pid? this.menuForm.pid: 0,
});
// 回调，false 表示通过当前ID懒加载子节点
await this.$emit("addCallback", true);
this.$message.success("新增成功");
}
this.onClose();
}
});
},
Summarize
希望之篇文章对大家有所帮助
method implementationDebug el-table的懒加载