项目中用到最多的就是表格组件，基本每一个模块都会有，下面是封装的表格和分页的组件。
组件 table.vue
<template> <div class="tabletemplate"> <!-- stripe:是否为斑马纹table， border:是否带有纵向边框， highlight-current-row:是否要高亮当前行， show-overflow-tooltip:当内容过长被隐藏时显示tooltip， --> <el-table :data="tableData" stripe border v-loading="loading" highlight-current-row :header-cell-style="{ 'background-color': headerBackColor, color: '#333' }" :cell-style="{ 'background-color': '#ffffff', 'border-color': cellBorderColor }" :row-style="{ border: 'none', }" show-overflow-tooltip style="width: 100%;" @selection-change="handleSelectionChange" ref="multipleTable" > <!-- 选择列 --> <el-table-column v-if="selectionShow" type="selection" align="center" :width="selectionWith" ></el-table-column> <!-- 序号列 --> <el-table-column v-if="indexShow" type="index" align="center" label="序号" fixed="left" :width="indexWidth" > <template slot-scope="scope"> <span>{{ (page - 1) * size + scope.$index + 1 }}</span> </template> </el-table-column> <!-- 表格数据列 --> <el-table-column align="center" v-for="column in tableColumns" :key="column.key" :label="column.title" :width="column.width" show-overflow-tooltip > <template slot-scope="scope"> <span>{{ scope.row[column.key] }}</span> </template> </el-table-column> <!-- 操作列 --> <el-table-column v-if="tableOperationShow" :width="operationColumnWidth" label="操作" align="center" fixed="right" > <template slot-scope="scope"> <el-button type="success" icon="el-icon-view" @click="view(scope.row)"></el-button> <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button> <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)"></el-button> </template> </el-table-column> </el-table> <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageCurrent" :page-sizes="[10, 25, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background> </el-pagination> </div> </div></template><script>export default { name: "tabletemplate", props: { headerBackColor: { // 表头背景颜色 type: String, default: "#F5F5F5" }, cellBackColor: { // 表格单元格背景颜色 type: String, default: "#FFFFFF" }, cellBorderColor: { // 表格单元格边框颜色 type: String, default: "#E6E6E6" }, tableData: { // 表格数据 type: Array, required: true, default: function() { return []; } }, tableColumns: { // 表格列数据 type: Array, required: true, default: function() { return []; } }, page: { type: Number, default: 1 }, size: { type: Number, default: 10 }, selectionWith: { type: Number, required: false, default: 50 }, operationColumnWidth: { // 表格操作列宽度 type: Number, required: false, default: 180 }, indexWidth: { type: Number, required: false, default: 55 }, selectionShow: { // 多选 type: Boolean, default: false }, indexShow: { // 序号列 type: Boolean, default: true }, tableOperationShow: { // 最后操作列 type: Boolean, required: false, default: false }, viewEdit: { type: Boolean, required: false, default: true }, viewDel: { type: Boolean, required: false, default: true }, viewDetail: { type: Boolean, default: true }, loading: { type: Boolean, default: false }, pageCurrent: { type: Number, required: false, default: 1 }, pageSize: { type: Number, required: false, default: 10 }, total: { type: Number, required: false, default: 0 } }, data() { return { }; }, methods: { // 当选择项发生变化时触发 handleSelectionChange(val) { this.$emit("handleSelectionChange", val); }, view(row) { this.$emit("view", row); }, edit(row) { this.$emit("edit", row); }, del(row) { this.$emit("del", row); }, // pageSize 改变时会触发 handleSizeChange(val) { this.$emit("handleSizeChange", val) console.log(`每页 ${val} 条`); }, // currentPage 改变时会触发 handleCurrentChange(val) { this.$emit("handleCurrentChange", val) console.log(`当前页: ${val}`); } }, computed: { }};</script><style lang="scss" scoped>.tabletemplate { width:95%; margin: 0 auto; .pagination{ margin: 15px; float: right; }}</style>然后就能在需要使用表格的地方调用封装的table组件
<template>
<div>
<!-- 引入表格公共组件 START --> <template-Table :tableData="tableList" :tableColumns="tableColumns" :loading="loading" :tableOperationShow="true" :headerBackColor="headerBackColor" :cellBackColor="cellBackColor" :cellBorderColor="cellBorderColor" @view="view" @edit="edit" @del="del" ></template-Table> </div>
</template>
<script>
import templateTable from '../../components/table/table'
export default {
name:'PersonInfo',
components:{
templateTable
},
data(){
return{
loading:false, headerBackColor:'#ccc', cellBackColor:'#ccc', cellBorderColor:'#ccc', tableColumns: [ { key: "card", title: "身份证", }, { key: "name", title: "姓名", }, { key: "sex", title: "性别", }, { key: "phone", title: "电话", }, { key: "address", title: "地址", } ], tableList: [{ card: '××××××××', name: '袍袍', sex: '男', phone: '183××××××××', address: '西湖区某某小区某幢某单元', }, { card: '××××××××', name: '咩咩', sex: '女', phone: '183××××××××', address: '西湖区某某小区某幢某单元', }, { card: '××××××××', name: '小白', sex: '男', phone: '183××××××××', address: '西湖区某某小区某幢某单元', }, { card: '××××××××', name: '黑皮', sex: '男', phone: '183××××××××', address: '西湖区某某小区某幢某单元', }, { card: '××××××××', name: '绿毛', sex: '男', phone: '183××××××××', address: '西湖区某某小区某幢某单元', }],
}
},
methods:{
view(data){
console.log(data)
},
edit(data){
console.log(data)
},
del(data){
console.log(data)
}
}
}
</script>最后实现的结果是这样的：
