tiny-vue
tiny-vue copied to clipboard
opentiny
✨ [Feature]: grid组件 树形表格支持懒加载功能
What problem does this feature solve
grid组件 树形表格支持懒加载功能
What does the proposed API look like
:tree-config="{ lazy: true, hasChildField: 'hasChildField', loadMethod ({ row }) { // 异步加载子节点 return fetchChildListApi(row) } }"
Bot detected the issue body's language is not English, translate it automatically.
Title: ✨ [Feature]: grid component tree table supports lazy loading function
<template>
<div>
<tiny-button @click="click">setTreeExpansion</tiny-button>
<tiny-grid
@toggle-tree-change="expandTree"
:select-config="{ labelField: 'index', checkStrictly: false, checkMethod }"
:fetch-data="fetchData"
ref="grid"
:pager="pagerConfig"
:tree-config="{ children: 'children' }"
>
<tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
</tiny-grid>
</div>
</template>
<script>
import { Grid, GridColumn, Button, Pager } from '@opentiny/vue'
export default {
components: {
TinyGrid: Grid,
TinyGridColumn: GridColumn,
TinyButton: Button
},
data() {
return {
tableData: Array.from({ length: 100 }, (a, i) => {
return {
id: '1' + i,
pid: '0',
name: 'GFD科技有限公司' + i,
area: '华东区',
employees: '1' + i
}
}),
tableData1: Array.from({ length: 10 }, (a, i) => {
return {
id: new Date().getTime() + '',
name: 'GFD科技有限公司101' + i,
area: '华东区',
employees: '101' + i
}
}),
pagerConfig: {
component: Pager,
attrs: {
currentPage: 1,
pageSize: 5,
pageSizes: [5, 10],
total: 0,
layout: 'total, prev, pager, next, jumper, sizes'
}
},
ridKey: new Date().getTime(),
fetchData: {
api: this.getData
}
}
},
methods: {
checkMethod(data) {
if (data.row.id === '1') {
return false
} else {
return true
}
},
// 树节点展开事件
expandTree({ row, rowIndex }, event) {
if (this.$refs.grid.hasTreeExpand(row)) {
setTimeout(() => {
let res = JSON.parse(JSON.stringify(this.tableData1))
res.forEach((item) => {
item._RID = `row_${this.ridKey++}`
})
console.log(res)
row.children = res
}, 500)
}
},
// 初始化table数据
getData({ page, sort, filters, filterArgs }) {
let curPage = page.currentPage
let pageSize = page.pageSize
let offset = (curPage - 1) * pageSize
return new Promise((resolve, reject) => {
setTimeout(() => {
let result = this.tableData.slice(0)
let total = this.tableData.length
if (filterArgs) {
result = result.filter((item) => item.area === filterArgs)
total = result.length
}
result = result.slice(offset, offset + pageSize)
result.forEach((item, index) => {
item.children = [{ id: '' }]
})
resolve({ result, page: { total: total } })
}, 500)
})
},
click() {
this.$refs.grid.setTreeExpansion([this.tableData[1], this.tableData[3]], true)
}
}
}
</script>
Bot detected the issue body's language is not English, translate it automatically.
Here is an implementation example for your reference.
这里有个实现的例子可以参考下
感谢回复，这样是可以，但是我希望的是，通过业务接口的一个字段可以判断出来有没有子集，以及展开图标展示与否。你这样的话就是那个图标会一直在，有的即使没有子集的话，也会调查子集的接口。可以参考这个https://vxetable.cn/#/table/tree/lazy
Bot detected the issue body's language is not English, translate it automatically.
Here is an implementation example for your reference.
This is okay, but what I hope is that a field in the business interface can be used to determine whether there is a subset and whether the expand icon is displayed.