ant design vue树形表格异步加载
ant design vue树形表格异步加载,自定义展开图标
·
1.表格结构如下:
<a-table
ref="labelTable"
:columns="labelColumns"
:data-source="loadLabelData"
:row-selection="rowSelection"
:expanded-row-keys.sync="expandedRowKeys"
:expandIcon="expandIcon"
@expand="getChild"
>
</a-table>
rowSelection:单元格可选,状态改变触发
expand:点击展开图标触发
expandIcon:图标自定义
2.下面是异步加载js代码:
// 表格点击获取子级
getChild (expanded, record) {
console.log(expanded, record)//expanded判断展开or收缩操作,record当前行数据
if (expanded) {
//异步调取接口获取数据
tagAPI.getAddId({ tagId: record.iid, type: sessionStorage.getItem('activeKey')
}).then(res => {
if (res.success) {
const data = this.loadLabelData
const children = res.data.tagItemEntityList
children.forEach((item) => {
item.key = item.iid
//hasChild为判断该对象扩展后是否有数据即是否能展开(这里可跟后端商量返回一个字
//段判断),若能则添加children(用来控制图标显示或隐藏)
if (item.hasChild === 1) {
item.children = []
}
})
//循环判断,添加children子级
const dataSourceMap = (items) => {
items.find((item) => {
if (item.iid === record.iid) {
// 找到当前要展开的节点
item.children = children
item.children.map((e) => {
//这里不用管,我是将tagLevel这个number数字转成中文
e.tagLevel = changeNumToHan(e.tagLevel)
})
return items
}
if (item.children && item.children.length > 0) {
dataSourceMap(item.children)
}
})
}
dataSourceMap(data)
this.loadLabelData = [...this.loadLabelData]
console.log('this.loadLabelData', this.loadLabelData)
}
})
} else {
//这里可添加收缩表格操作
}
},
注意:为了优化界面,不能一开始就给每个表格单元显示展开图标,万一有的点开后异步加载是空数据呢,所以这里需要跟后端商量,让他返给你一个字段,用来判断这级下面是否有数据,若有数据,则给这一级添加一个空的children,可以控制展开图标显示。
3.下面是图标的自定义方法:
expandIcon (props) {
console.log(props)
if (props.record.children) {
if (props.expanded) {
return (
<span
class="table-icon"
onClick={(e) => {
props.onExpand(props.record, e)
}}
>
//收缩图标
<a-icon type="down" />
</span>
)
} else {
return (
<span
class="table-icon"
onClick={(e) => {
props.onExpand(props.record, e)
}}
>
//展开图标
<a-icon type="right" />
</span>
)
}
} else {
return <span style="margin-right:19px"></span>
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)