<template>
<div style="margin-left:5%;margin-right:5%;">
<el-row>
<div style="height:200px">
</div>
</el-row>
<el-row>
<span>已训练完毕，聚类分为5组</span>
</el-row>
<el-divider></el-divider>
<el-row style="text-align: center">
<img src="@/assets/algorithm_demo3.png" style="margin: 0 auto;">
</el-row>
<el-row>
<el-collapse v-model="activeNames" @change="handleChange">
<el-row v-for="(item,index) in objArr">
<el-collapse-item :title="'当前为第'+item.id+'组，共'+item.list+'条，为您展示前10条数据'" :name="index">
<div class="infinite-list-wrapper" style="overflow:auto;height: 200px" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
<ul class="list" >
<li v-for="i in count" class="list-item">{{ i }}</li>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>
</div>
</el-collapse-item>
</el-row>
</el-collapse>
</el-row>
</div>
</template>
<script>
export default {
name: "slider3",
data() {
return{
count: 10,
loading: false,
activeNames: ['1'],
objArr: [
{id: 1,
list: 200
},
{
id: 2,
list: 2000
},
{
id: 3,
list: 5000
},
{
id: 4,
list: 4600
},
{
id: 5,
list: 30000
}
]
}
},
computed: {
noMore () {
return this.count >= 20
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
load () {
this.loading = true
setTimeout(() => {
this.count += 2
this.loading = false
}, 2000)
}
}
}
</script>
<style scoped>
.el-divider{
margin: 8px 0;
background: 0 0;
border-top: 1px solid #E6EBF5;
}
</style>
发现element-ui的分割线间距有点大，且未提供虚线样式。
于是使用了下面链接文章的方式
https://blog.csdn.net/zzzsheng/article/details/104000968
在最下方直接修改原来的样式
/* el-divider 修改高度&虚线效果 */
.el-divider--horizontal{
margin: 8px 0;
background: 0 0;
border-top: 1px dashed #e8eaec;
}
效果图如下:
