forked from github/dataease
feat: 分享面板懒加载且动态刷新
This commit is contained in:
parent
9d1a7e4e0f
commit
670a640606
@ -1,7 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
|
<el-tree :data="datas" :props="defaultProps" @node-click="handleNodeClick">
|
||||||
|
<span slot-scope="{ data }" class="custom-tree-node">
|
||||||
|
<span>
|
||||||
|
<span v-if="!!data.id">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-picture-outline"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span style="margin-left: 6px">{{ data.name }}</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</el-tree>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -11,7 +23,7 @@ export default {
|
|||||||
name: 'ShareTree',
|
name: 'ShareTree',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
data: [],
|
datas: [],
|
||||||
defaultProps: {
|
defaultProps: {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'name'
|
label: 'name'
|
||||||
@ -25,7 +37,7 @@ export default {
|
|||||||
initData() {
|
initData() {
|
||||||
const param = {}
|
const param = {}
|
||||||
loadTree(param).then(res => {
|
loadTree(param).then(res => {
|
||||||
this.data = res.data
|
this.datas = res.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleNodeClick(data) {
|
handleNodeClick(data) {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<de-container>
|
<de-container>
|
||||||
|
|
||||||
<de-aside-container>
|
<de-aside-container>
|
||||||
<el-tabs v-model="activeName" :lazy="true" @tab-click="handleClick">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
<el-tab-pane name="PanelList">
|
<el-tab-pane name="PanelList">
|
||||||
<span slot="label"><i class="el-icon-document" />列表</span>
|
<span slot="label"><i class="el-icon-document" />列表</span>
|
||||||
<PanelList @switchComponent="switchComponent" />
|
<PanelList @switchComponent="switchComponent" />
|
||||||
@ -11,9 +11,9 @@
|
|||||||
<span slot="label"><i class="el-icon-star-off" />收藏</span>
|
<span slot="label"><i class="el-icon-star-off" />收藏</span>
|
||||||
开发中...
|
开发中...
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane name="panels_share">
|
<el-tab-pane name="panels_share" :lazy="true">
|
||||||
<span slot="label"><i class="el-icon-share" />分享</span>
|
<span slot="label"><i class="el-icon-share" />分享</span>
|
||||||
<share-tree />
|
<share-tree v-if="showShare" />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<!-- <el-tab-pane name="example">-->
|
<!-- <el-tab-pane name="example">-->
|
||||||
<!-- <span slot="label"><i class="el-icon-star-on"></i>示例</span>-->
|
<!-- <span slot="label"><i class="el-icon-star-on"></i>示例</span>-->
|
||||||
@ -47,12 +47,16 @@ export default {
|
|||||||
return {
|
return {
|
||||||
component: PanelViewShow,
|
component: PanelViewShow,
|
||||||
param: {},
|
param: {},
|
||||||
activeName: 'PanelList'
|
activeName: 'PanelList',
|
||||||
|
showShare: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClick(tab, event) {
|
handleClick(tab, event) {
|
||||||
console.log(tab, event)
|
// 点击分析面板需要刷新分享内容
|
||||||
|
if (tab.name === 'panels_share') {
|
||||||
|
this.refreshShare()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
switchComponent(c) {
|
switchComponent(c) {
|
||||||
console.log(c)
|
console.log(c)
|
||||||
@ -62,6 +66,10 @@ export default {
|
|||||||
this.component = PanelViewShow
|
this.component = PanelViewShow
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
refreshShare() {
|
||||||
|
this.showShare = false
|
||||||
|
this.$nextTick(() => (this.showShare = true))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user