el-table懒加载,修改数据局部加载懒加载数据
看着标题是不是有点绕,这里的需求是使用el-table的懒加载,加载数据后,修改懒加载后的数据时不进行全局的刷新,而是只操作当前懒加载的数据,比如一级是真实的数据,二级是懒加载的数据,当二级的某条数据进行了修改后,只让当前的二级菜单重新向后台请求数据,进行刷新得到最新的数据希望之篇文章对大家有所帮助方法实现Debugel-table的懒加载。
·
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
看着标题是不是有点绕,这里的需求是使用el-table的懒加载,加载数据后,修改懒加载后的数据时不进行全局的刷新,而是只操作当前懒加载的数据,比如一级是真实的数据,二级是懒加载的数据,当二级的某条数据进行了修改后,只让当前的二级菜单重新向后台请求数据,进行刷新得到最新的数据
一、在el-table中开启懒加载
支持树类型的数据的显示。当 row 中包含 children
字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key
。支持子节点数据异步加载。设置 Table 的 lazy
属性为 true 与加载函数 load
。通过指定 row 中的 hasChildren
字段来指定哪些行是包含子节点。children
与hasChildren
都可以通过 tree-props
配置。
<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>
二、进行改造
1.在data中添加全局变量
代码如下(示例):
export default {
data() {
return {
// 存储操作的DOM数据
thisTabeDom: Object,
tableData: [{}]
}
}
}
2.在对应的操作中给thisTabeDom
赋值
代码如下(示例):
<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.编写回调方法tabeDomCallback
代码如下(示例):
// 修改回调
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.对话框操作后进行方法回调
代码如下(示例):
/**
* 确认提交
*/
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();
}
});
},
总结
希望之篇文章对大家有所帮助
方法实现 Debug
el-table的懒加载
更多推荐
所有评论(0)