首先,实现的大概效果如下:
接下来代码如下:
<el-dialog
v-el-drag-dialog
title="预览"
:visible.sync="dialogFormPreview"
width="500px"
><div v-for="item in logList.slice(0,loadNum)" :key="item.index"> {{ item }} </div><el-button type="warning" size="mini" v-if="loadNum < logList.length" @click="loadMore" style="display: block;margin: auto;">点击加载更多</el-button><el-button disabled size="mini" style="display: block;margin: auto;" v-else>没有更多了</el-button><div slot="footer" class="dialog-footer"><el-button @click="dialogFormPreview = false">取消</el-button></div>
</el-dialog>
data(){return{loadNum:5,logList: ['1','2','3','4','5','6','7','1','2','3','4','5','6','7','1','2','3','4'],}
methods:{loadMore:function(){this.loadNum+=5;}}
}