프로그램 학습

<template>  

<el-table    border    height="400px"    v-el-table-infinite-scroll="load"    :data="tableData"  >    

<el-table-column prop="date" label="日期" width="180"> </el-table-column>    

<el-table-column prop="name" label="姓名" width="180"> </el-table-column>    

<el-table-column prop="address" label="地址"> </el-table-column>  

</el-table>

</template>

<script> import elTableInfiniteScroll from 'el-table-infinite-scroll';

const exampleData = new Array(10).fill({  date: '2016-05-02',  name: '王小虎',  address: '上海市普陀区金沙江路 1518 弄' });

export default {  

directives: {  

 'el-table-infinite-scroll': elTableInfiniteScroll  

},  

data() {    

return {      tableData: exampleData    };  

},  

methods: {  

 load() {      

this.$message.success('加载下一页');      

this.tableData = this.tableData.concat(exampleData);  

 }

 }

};

</script>

<style scoped>

.el-table {  width: 100%; }

</style>

참고 사이트 : https://www.okcode.net/article/54646

참조 사이트 : https://m.blog.naver.com/PostView.nhn?blogId=mysk4521&logNo=221542727190&categoryNo=95&proxyReferer=https%3A%2F%2Fwww.google.com%2F

https://peachscript.github.io/vue-infinite-loading/

<el-table :data="[{a:1,b:2}]" style="width: 100%" ref="table">

<el-table-column :min-width="33" prop="a" label="A"></el-table-column>

<el-table-column :min-width="67" prop="b" label="B"></el-table-column>

</el-table>

출처 : https://jsfiddle.net/coolbean/f5wyohsq/