8
8
<span class =" ml-4" >{{ item?.name }}</span >
9
9
</div >
10
10
</template >
11
- <el-scrollbar >
11
+ <el-scrollbar ref = " scrollRef " :key = " index " >
12
12
<div class =" mb-16" >
13
13
<el-text type =" info" >{{ item.content.length }} 段落</el-text >
14
14
</div >
15
-
16
- <div class =" paragraph-list" >
15
+ <div class =" paragraph-list" v-infinite-scroll =" loadScroll" >
17
16
<el-card
18
- v-for =" (child, cIndex) in item.content "
17
+ v-for =" (child, cIndex) in scrollData "
19
18
:key =" cIndex"
20
19
shadow =" never"
21
20
class =" card-never mb-16"
52
51
/>
53
52
</template >
54
53
<script setup lang="ts">
55
- import { ref , reactive , onMounted , watch } from ' vue'
54
+ import { ref , reactive , onMounted , watch , nextTick } from ' vue'
56
55
import { cloneDeep } from ' lodash'
57
56
import type { TabsPaneContext } from ' element-plus'
58
57
import EditParagraphDialog from ' ./EditParagraphDialog.vue'
@@ -70,23 +69,49 @@ const props = defineProps({
70
69
const emit = defineEmits ([' update:data' ])
71
70
72
71
const EditParagraphDialogRef = ref ()
72
+ const scrollRef = ref ()
73
73
74
74
const activeName = ref (0 )
75
75
const currentPIndex = ref (null ) as any
76
76
const currentCIndex = ref (null ) as any
77
77
78
78
const newData = ref <any []>([])
79
79
80
+ // 滚动加载数据
81
+ const paginationConfig = reactive ({
82
+ current_page: 1 ,
83
+ page_size: 20
84
+ })
85
+
86
+ const scrollData = ref <any []>([])
87
+
80
88
watch (
81
89
() => props .data ,
82
90
(value ) => {
83
91
newData .value = value
92
+ paginationConfig .current_page = 1
93
+ nextTick (() => {
94
+ scrollRef .value ?.[activeName .value ]?.scrollTo (0 , 0 )
95
+ })
96
+ scrollData .value = newData .value [activeName .value ]?.content .slice (0 , paginationConfig .page_size )
84
97
},
85
98
{
86
99
immediate: true
87
100
}
88
101
)
89
102
103
+ function loadScroll() {
104
+ if (newData .value [activeName .value ]?.content .length > scrollData .value .length ) {
105
+ paginationConfig .current_page += 1
106
+ scrollData .value .push (
107
+ ... newData .value [activeName .value ].content .slice (
108
+ (paginationConfig .current_page - 1 ) * paginationConfig .page_size ,
109
+ paginationConfig .current_page * paginationConfig .page_size
110
+ )
111
+ )
112
+ }
113
+ }
114
+
90
115
function editHandle(item : any , index : number , cIndex : number ) {
91
116
currentPIndex .value = index
92
117
currentCIndex .value = cIndex
@@ -100,17 +125,22 @@ function deleteHandle(item: any, index: number, cIndex: number) {
100
125
})
101
126
.then (() => {
102
127
newData .value [index ].content .splice (cIndex , 1 )
128
+ scrollData .value .splice (cIndex , 1 )
103
129
emit (' update:data' , newData .value )
104
130
})
105
131
.catch (() => {})
106
132
}
107
133
108
134
function updateContent(data : any ) {
109
135
newData .value [currentPIndex .value ].content [currentCIndex .value ] = cloneDeep (data )
136
+ scrollData .value [currentCIndex .value ] = cloneDeep (data )
110
137
emit (' update:data' , newData .value )
111
138
}
112
139
113
- const handleClick = (tab : TabsPaneContext , event : Event ) => {}
140
+ const handleClick = (tab : TabsPaneContext , event : Event ) => {
141
+ paginationConfig .current_page = 1
142
+ scrollData .value = newData .value [Number (tab .index )]?.content .slice (0 , paginationConfig .page_size )
143
+ }
114
144
115
145
onMounted (() => {})
116
146
</script >
0 commit comments