一、封装的表格组件
<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>
二、在父组件引入注册表格组件
import TableList from '@/com/table.vue'
----------------
export default {
components: {
TableList
},
}
三、在父组件template
中使用表格组件
<template>
<div style="height: 100%">
<table-list
:table="table"
:tableData="tableData"
@operation="getExamine"
@toDetails="details"
:load="load"
></table-list>
</div>
</template>
四、在父组件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(),
},
],
}
}
五、在父组件methods
定义表格将要调用的方法
methods: {
getExamine(e) {
// 根据table组件传的不同的id进行不同的操作
//to do something
},
details(e) {
// to to something
},
},