1、参考官方文档:https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md
2、使用make new命令新增组件
node build/bin/new.js page-table "分页表格"
3、修改packages/page-table/src/main.vue代码
<template>
<div class="el-page-table">
<el-table
:data="data"
:height="height"
:max-height="maxHeight"
:stripe="stripe"
:border="border"
style="width: 100%"
>
<slot></slot>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'ElPageTable',
props: {
data: {
default() {
return [];
},
type: Array
},
height: [String, Number],
maxHeight: [String, Number],
stripe: {
default() {
return true;
},
type: Boolean
},
border: {
default() {
return true;
},
type: Boolean
},
currentPage: {
default() {
return 1;
},
type: Number
},
pageSizes: {
default() {
return [100, 200, 300, 400];
},
type: Array
},
pageSize: {
default() {
return 10;
},
type: Number
},
layout: {
default() {
return 'total, sizes, prev, pager, next, jumper';
},
type: String
},
total: {
default() {
return 0;
},
type: Number
}
},
data: function() {
return {
};
},
methods: {
handleSizeChange(val) {
this.$emit('size-change', val);
},
handleCurrentChange(val) {
this.$emit('current-change', val);
}
},
mounted() {
}
};
</script>
4、使用 npm run dist打包
4、使用:引入相关的js和css文件,参考:http://element.eleme.io/#/zh-CN/component/installation
<el-page-table :data="tableData" :current-page="3" @current-change="handleCurrentChange">
<el-table-column label="商品 ID" prop="id">
</el-table-column>
<el-table-column label="商品名称" prop="name">
</el-table-column>
<el-table-column label="描述" prop="desc">
</el-table-column>
</el-page-table>
new Vue({
el: '#app',
data: function() {
return { tableData: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}]};
},
methods: {
handleCurrentChange: function(val) {
console.log('当前页:' + val);
}
}
});
5、说明
1.使用props获取父组件传递过来的参数
2.使用this.$emit调用父组件的事件
3.使用输入标签内的内容:el-table-column部分
4.如果需要ElTable及ElPagination其他属性和事件可参照上述方法拓展
最终效果如下: