// 刷新
refreshHandle() {
this.dataListLoading = true
const store = this.$refs.table.store
store.states.data = []
setTimeout(async () => {
await this.getDataList()
}, 500)
},
//点击新增按钮的新增方法:item为行数据
addLazyTableItem(item) {
const store = this.$refs.table.store
let parent = null
if (item.parentCode !== 0) {
let map = store.states.lazyTreeNodeMap
parent = map[item.parentId]
if (!parent) {
this.$set(map, item.parentId, [])
parent = map[item.parentId]
}
} else {
parent = store.states.data
}
this.$set(parent, parent.length, item)
},
//点击修改按钮的修改方法:item为行数据
updateLazyTableItem(item) {
const store = this.$refs.table.store
const parent =
item.parentId!== 0
? store.states.lazyTreeNodeMap[item.parentId]
: store.states.data
const index = parent.findIndex(
(child) => child.id=== item.id
)
this.$set(parent, index, { ...parent[index], ...item })
},
//点击删除按钮的删除方法:item为行数据
deleteLazyTableItem(item) {
const store = this.$refs.table.store
const parent =
item.parentId!== 0
? store.states.lazyTreeNodeMap[item.parentId]
: store.states.data
const index = parent.findIndex(
(child) => child.id=== item.id
)
parent.splice(index, 1)
},
elementUI中table的树形结构的刷新、增加、修改、删除
最新推荐文章于 2024-07-11 00:15:48 发布
本文详细介绍了在Vue.js应用中如何实现动态表格的数据刷新、增删改功能。`refreshHandle()`方法用于刷新表格数据,通过设置数据为空并延迟加载新的数据。`addLazyTableItem()`和`updateLazyTableItem()`分别实现了新增和编辑表格行数据,而`deleteLazyTableItem()`则用于删除行数据,确保了数据与视图的同步更新。
摘要由CSDN通过智能技术生成