element-ui,实现点击“加载更多“

首先，实现的大概效果如下：

 接下来代码如下:

<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;
    }
   }
}