组件封装是为了更佳方便使用和复用,否则封装没有意义。
本文的封装只限制于数据展示,和修改。
新增数据和修改数据封装难度过高,暂无实现思路,如有可实现思路,可于评论区与我讨论,若可行,我会尝试实现。
代码基于vue2.x版本
代码包含i18n,如无需要i18n,可以直接把$t('xxx')
替换成对应的变量或value即可。需要配置i18n可查看我的另一篇文章
代码如下
定义组件
新增Table.vue
thml
<div>
<el-table :data="tableData" style="width: 100%;height: 100%;">
<div slot="empty" style="text-align: left;">
<span style="font-size: 20px">
<Icon type="md-search" />{{ $t('table.emptyText') }} <!-- i18n写法,可以直接使用“未查询到数据”在页面展示-->
</span>
</div>
<el-table-column v-for="(item, index) in showMessageList" :key="index" :fixed="index < 3" :prop="item.propName"
:label="$t(item.labelname)" width="150"><!-- i18n写法,不需要i18n去掉 `$t()`, item.labelname不变-->
</el-table-column>
<el-table-column fixed="right" :label="$t('table.action')" width="100">
<template slot-scope="scope">
<el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block" style="float: right;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="pageSizesArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
js
export default {
name: 'Table',
props: {
showMessageList: {
type: Array,
default: () => {
return [];
},
required: true
},
tableData: {
type: Array,
default: () => {
return [];
},
required: true
},
porpTotal: {
type: Number,
default: 5,
required: true
},
pageSizesArray: {
type: Array,
default: () => {
return [5, 10, 20, 50, 100];
},
required: false
}
},
data() {
return {
pageSize: 5,
currentPage: 1,
total: 0,
dialogTableVisible: false,
newForm: {},
rules: {},
}
},
components: {
},
created() {
this.total = this.porpTotal;
},
methods: {
// handleView(row) {
// console.log(row);
// this.$emit('fat_viewStore', row);
// },
// handleEdit(row) {
// console.log(row);
// this.$emit('fat_editStore', row);
// },
// 都是重新查询数据
handleSizeChange(val) {
this.pageSize = val;
this.$emit('fat_queryData', this.currentPage, this.pageSize);
},
handleCurrentChange(val) {
this.currentPage = val;
this.$emit('fat_queryData', this.currentPage, this.pageSize);
},
handleDelete(row) {
// 发生请求删除
}
},
mounted() {
},
}
组件使用
父组件引入,注册。
在需要的地方使用table组件
thml
<Table :showMessageList="storeShowMessageList" :tableData="storeData" :porpTotal="total"
@fat_queryData="handleQueryDate"></Table>
js
export default {
name: 'Test',
data() {
return {
storeShowMessageList: [{
"labelname": 'table.student', // 表格上head的名称, 代码示例为表示变量以支持i18n。改为实际值如:学生姓名
"propName": 'studentName' // 表格上head的名称对应的数据名字, 根据展示的数据值名填写。如下
},{
"labelname": 'table.studentNO', // 表格上head的名称, 代码示例为表示变量以支持i18n。改为实际值如:学生姓名
"propName": 'studentNO' // 表格上head的名称对应的数据名字, 根据展示的数据值名填写。如下
},
...
],
// 请求后端返回的数据列表
storeData: [
{
"studentName": "张三", // studentName就是storeShowMessageList里面对象的propName的值
"studentNO": "00001",
...
}
],
total: 100 // 数据的数量
}
},
components: {
Table
},
methods: {
handleQueryDate(currentPage, size) {
...
// 发生请求拉取数据
}
},
mounted() {
}
}