element的这个ui框架其实已经满足了大部分需求,个人感觉比较好用。那么,为什么需要再次进行二次封装呢?其实,在项目中很多页面或者是某个功能基本类似的,那么就可以单独封装成一个公共的组件,把需要的值传出来。然后把这个公共的组件引入需要的父组件里。在传入想要的值(数据),这样开发效率会提升很多。
又啰嗦!
代码示例:
公共组件(定义为mTable)
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
border
:height= "height"
:empty-text="emptyText"
>
// table的第一列是判断是否为序号(index)或者是选择框(selection)
<el-table-column
v-if="index"
width="55"
type="index"
align="center">
</el-table-column>
<el-table-column
v-if="selection"
width="55"
type="selection"
align="center">
</el-table-column>
// 表头数据
<el-table-column
v-for="(item,index) in tableConfigArr" :key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
align="center">
</el-table-column>
// 表格操作项,使用scope.row拿到当前行的数据
<el-table-column label="操作" prop="actions" width="180" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="check(scope.row)">查看</el-button>
<el-button type="danger" size="small" @click="edit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30, 40]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
/*
data:表格数据源;
height:该表格的高度 如果该高度有值 则会固定表头;
border:是否需要边框;
empty-text:空数据时显示的文本内容->暂无数据;
*/
export default {
data() {
return {
}
},
props:{
// 是否显示序号(index)/ 选择框(selection)
index:{
type:Boolean,
default:false
},
selection:{
type:Boolean,
default:false
},
// 表格数据
tableData: {
type:Array
},
// 表头数据
tableConfigArr:{
type:Array
},
// 表头高度
height:{
type:String,
default:'484'
},
// 当表格无数据的时候表格内显示暂无数据
emptyText:{
type:String,
default:"暂无数据"
},
page: {
type: Number
},
size: {
type: Number
},
total: {
type: Number
},
},
methods:{
check(row){
console.log(row,"打开查看")
},
edit(row){
console.log(row,"打开编辑")
}
}
}
</script>
<style>
</style>
父组件
代码示例:
<template>
<div id="app">
<div class="table-container" >
<myTable :tableData="tableData" :tableConfigArr='tableConfigArr' :selection="true"></myTable>
<div class="pageFlex">
<Pagination :page='page' :size='size'
:total='total'
@handleSizeChange='handleSizeChange'
@handleCurrentChange='handleCurrentChange'></Pagination>
</div>
</div>
</div>
</template>
<script>
import myTable from '@/components/mTable.vue';
export default {
name: 'app',
components: {
myTable
},
data() {
return {
page: 1,
size: 10,
total: 100,
tableData: [ {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableConfigArr:[
{
fixed: false,
prop: 'date',
label: '日期',
width: 120
},
{
fixed: false,
prop: 'name',
label: '姓名',
width: 120
},
{
fixed: false,
prop: 'address',
label: '地址',
width: 240
},
{
fixed: false,
prop: 'date',
label: '日期',
width: 120
},
{
fixed: false,
prop: 'name',
label: '姓名',
width: 120
},
{
fixed: false,
prop: 'address',
label: '地址',
width: 240
}
]
};
},
methods: {
handleSizeChange(e){
console.log(e)
this.size = e
},
handleCurrentChange(e){
console.log(e)
this.page = e
}
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
.table-container{
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
}
.table-container>.pageFlex{
align-items: center;
}
</style>
最终展示效果
注意,里面逻辑是随便写的,具体看真正需要传的值。
其实封装的主要想法是通过props传值接收,以及$emit将值传到父组件