问题描述:我们再开发中有时候会遇到相同功能表格,这个时候会将表格进行封装拆分处理。这里暂时记录一下简单的封装,加上一些必要的属性,其他属性有需要再加上去。
一,简单封装Table表格组件
1,Table子组件
<template>
<div class="TableGrid">
<el-table
header-row-class-name="table-list-header"
row-class-name="table-list-row"
:max-height="tableData.maxHeight"
:data="tableData.data"
@selection-change="handleSelectionChange">
<!-- 遍历 columns -->
<template v-for="(item, index) in tableData.columns">
<!-- 选择框 -->
<el-table-column
v-if="item.selection"
type="selection"
width="50"
fixed="left"
align="center"
:key="index"></el-table-column>
<!-- 序号 -->
<el-table-column
v-else-if="item.index"
type="index"
width="100"
fixed="left"
label="序号"
:index="item.indexMethod"
:key="index"></el-table-column>
<!-- 自定义内容 -->
<slot
v-else-if="item.slot"
show-overflow-tooltip
:name="item.slot"
:fixed="item.fixed"
:height="item.height"></slot>
<!-- 常规字段 -->
<el-table-column
v-else
show-overflow-tooltip
v-bind="item"
:min-width="item.minWidth"
:key="index"></el-table-column>
</template>
</el-table>
<!-- 分页器 -->
<el-pagination
background
layout="prev, pager, next"
@current-change="handleCurrentChange"
:current-page.sync="pagination.currentPage"
:page-size="pagination.pageSize"
:total="tableData.total">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'Table',
props: {
tableData: {
type: Object,
default() {
return {
columns: {
type: Array,
},
data: {
type: Array,
},
total: {
type: Number,
},
};
},
},
},
data() {
return {
pagination: {
pageSize: 10,
currentPage: 1,
},
};
},
methods: {
// 切换页码
handleCurrentChange() {
this.$emit('getData', this.pagination);
},
// 切换选择
handleSelectionChange(val) {
this.$emit('changeSelection', val);
},
},
};
</script>
2,Table父组件
<template>
<div>
<Table
ref="table"
:table-data="tableData"
@getData="getList"
@changeSelection="changeTableSelection">
<el-table-column
slot="action"
align="center"
label="操作"
width="200">
<template slot-scope="scope">
<el-button
type="text"
@click="showDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</Table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: {
columns: [
{
selection: true,
},
{
index: true,
indexMethod(index) {
return index + 1;
},
},
{
prop: 'name',
label: '姓名',
fixed: 'left',
},
...
{
slot: 'action',
},
],
data: [],
total: 0,
},
};
},
methods: {
// 获取数据
getList(pagination = { currentPage: 1, pageSize: 10 }) {
...
// 请求到数据后,重新设置分页器(用于一些主动查询场景)
this.$refs.table.pagination = {
...pagination,
};
},
// 切换选择
changeTableSelection(val) {
console.log(val);
},
// 操作
showDetail(row) {
console.log(row);
},
},
};
</script>
二,复杂的封装Table表格组件
1、子组件Table的封装
<template>
<div>
<el-row>
<el-col :span="24">
<el-table :data="tableData" border v-loading="load">
<template v-for="(item, index) of table">
<!--if判断的是父组件传的表头是操作的id名,对需要特殊处理的列进行特殊的处理-->
<el-table-column
v-if="item.id === 'operation'"
:key="index"
:prop="item.id"
:label="item.name"
:align="item.align ? item.align : 'center'"
:width="item.width"
>
<!--可以自行增加按钮,请改变点击事件的第二个参数,父组件会根据第二个参数判断当前点击的是什么按钮-->
<template slot-scope="scope">
<el-button
v-for="item1 in item.list"
:key="item1.id"
@click="examine(scope.row, item1.id)"
type="text"
size="small"
>{{ item1.name }}</el-button
>
</template>
</el-table-column>
<el-table-column
v-else-if="item.id === 'sectionName'"
:label="item.name"
:key="index"
:prop="item.id"
:align="item.align ? item.align : 'center'"
:width="item.width"
:type="item.type"
>
<template slot-scope="scope">
<span
style="color: blue; cursor: pointer"
@click="
details('断面详情-' + scope.row.sectionName, scope.row._id)
"
>{{ scope.row.sectionName }}</span
>
</template>
</el-table-column>
<!-- 定义了一个全局过滤器,可以将毫秒数转化为日期格式 -->
<el-table-column
v-else-if="item.id === 'sectionUpdateTime'"
:label="item.name"
:key="index"
:prop="item.id"
:align="item.align ? item.align : 'center'"
:width="item.width"
:type="item.type"
>
<template>{{ item.sectionUpdateTime | dateFormat }}</template>
</el-table-column>
<!--可以传align,width和type来控制表格的居中,宽度和类型(比如需要序号,type传index)-->
<el-table-column
v-else
:label="item.name"
:key="index"
:prop="item.id"
:align="item.align ? item.align : 'center'"
:width="item.width"
:type="item.type"
>
</el-table-column>
</template>
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'tableList',
// 父组件传过来的值
props: ['table', 'tableData', 'load'],
methods: {
// 调用父组件的方法
examine(rows, id) {
this.$emit('operation', { id: id, rows: rows })
},
details(name, id) {
this.$emit('toDetails', { name, id })
},
},
}
</script>
2,在父组件引入注册表格组件
import TableList from '@/com/table.vue'
----------------
export default {
components: {
TableList
},
}
3,在父组件template中使用表格组件
<template>
<div style="height: 100%">
<table-list
:table="table"
:tableData="tableData"
@operation="getExamine"
@toDetails="details"
:load="load"
></table-list>
</div>
</template>
4,在父组件data中定义表格展示数据
data() {
return {
load: false, //是否有加载动画
table: [
//表头
{ type: 'selection' },
{ type: 'index', name: '#' },
{ id: 'sectionName', name: '名称' },
{ id: 'sectionMaintainGrid', name: '数据维护' },
{ id: 'sectionPublic', name: '是否公有' },
{ id: 'sectionMaintainer', name: '数据维护人' },
{ id: 'sectionUpdateTime', name: '最新修改时间' },
{
id: 'operation',
name: '操作',
list: [
{ id: 'examine', name: '查看' },
{ id: 'compile', name: '编辑' },
{ id: 'delete', name: '删除' },
],
}, // id名是固定的,如若改变,请同时改变table组件对应的地方
],
tableData: [
// 数据内容
{
sectionName: '北京',
sectionMaintainGrid: '华北电网',
sectionPublic: '是',
sectionMaintainer: '小北',
sectionUpdateTime: new Date().getTime(),
},
],
}
}
5,在父组件methods定义表格将要调用的方法
methods: {
getExamine(e) {
// 根据table组件传的不同的id进行不同的操作
//to do something
},
details(e) {
// to to something
},
}