vue +ant design中树形菜单自定义图标,分段请求子菜单的需求
还是ant design比较强大,最近用了tree的组件,先看实现效果吧HTML:<a-tree:autoExpandParent="true"defaultExpandAll:treeData="treedata"showIconclass="main-table"@select="handleSelected":loadData="on
·
还是ant design比较强大,最近用了tree的组件,先看实现效果吧
HTML:
<a-tree
:autoExpandParent="true"
defaultExpandAll
:treeData="treedata"
showIcon
class="main-table"
@select="handleSelected"
:loadData="onLoadData"
>
<img src="../../assets/case_info.png" alt="" slot="case_info" style="width:0.15rem;height:0.15rem;">
<img src="../../assets/evidence_list.png" alt="" slot="evidence_list" style="width:0.15rem;height:0.15rem;">
<img src="../../assets/example.png" alt="" slot="null" style="width:0.15rem;height:0.15rem;">
<img src="../../assets/sim_card_info.png" alt="" slot="sim_card_info" style="width:0.15rem;height:0.15rem;">
<img src="../../assets/basic_info.png" alt="" slot="basic_info" style="width:0.15rem;height:0.15rem;">
</a-tree>
注意啊,后端给的数据接口要包括slot里面的值,不然没法对应
然后我们请求一次父菜单还有还有请求子菜单
mounted(){
this.getMenuTree()
},
methods:{
getMenuTree(){
this.treedata = []
getMenuTreeTable({id:this.$route.params.sampleId}).then((res) =>{//树形菜单的动态获取数据
this.treedata=res.data
})
},
//在这里加setTimeout可以出现loading的效果哦!!!!
onLoadData(treeNode){ //对应组件中 :loadData="onLoadData"来进行请求子菜单
const _this = this
return new Promise((resolve) =>{
if(treeNode.dataRef.children) {
resolve() //有了值就会直接渲染
return
}
let param = {datasetCollectInfoId:this.$route.params.sampleId,pid:treeNode.dataRef.key}
getChildrenId(param).then((res) =>{ //子菜单的数据接口
if(res.code== 20000){
treeNode.dataRef.children = res.data
_this.treedata = [..._this.treedata]
}
})
resolve()
})
},
然后我们点击每一个菜单,然后拿到数据传给右侧表格显示,这里需要的是组件中 @select="handleSelected"
methods中写:
handleSelected(keys, info) { //点击树形菜单每一列菜单
console.log("点击文字:", info.node.dataRef.datasetCollectInfoId);
this.metaTableId = info.node.dataRef.metaTableId
this.LeafNode = info.node.dataRef.children
},
info.node.dataRef 中我们可以拿到到树形菜单每一项的所有值,取到我们想要的值进行传递,这里取到的是id,然后用
watch去监听metaTableId拿取到值去响应表格内容
嘿嘿,要是觉得每次加载树形菜单时间太长,需要加一个loading的效果,可以给个定时器去设置,在加载子菜单的数据的地方
每次学到新东西,及时去整理,发现,拓展,思考,就会发现其实也不是很难的。
更多推荐
已为社区贡献12条内容
所有评论(0)