1、先封装表格
说明：this.$parent 为调用父组件的方法，
<template>
<div id="tables">
<!-- table 表格 -->
<el-table id="ou" size="mini" :cell-style="{textAlign:'center'}"
:header-cell-style="{background:'#f2f2f2',color:'#666666',textAlign: 'center'}" :border="true"
:data="data.tableList" @selection-change="handleSelectionChange" ref="multipleTable" style="width: 100%">
<el-table-column v-if="isSelection" type="selection" width="55"></el-table-column>
<template v-for="item in data.tableHeader">
<el-table-column sortable :key="item.name" :prop="item.prop" :label="item.label" :min-width="item.width"
v-if="item.type==='slot'">
<!-- 作用域 -->
<template slot-scope="{ row }">
<slot :name="item.slotName" :data="row"></slot>
</template>
</el-table-column>
<el-table-column sortable :key="item.name" :prop="item.prop" :label="item.label" :min-width="item.width"
v-else>
</el-table-column>
</template>
</el-table>
<!-- table end -->
<!-- 分页器 -->
<div class="pagination" v-if="isShowPage">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage4" :page-sizes="pageSize" :page-size="size"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
//data表格的数据(对象) total分页器总页数 isShowPage是否显示分页器 isSelection是否显示表格首列勾选框
props: ['data', "total", 'isShowPage','isSelection'],
data() {
return {
multipleSelection: '',
currentPage4: 1, //当前页数
pageSize: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], //可选页数
size: 10, //每页大小
}
},
methods: {
//每页条数
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.$parent.setSize(val)
},
//当前页数/页数切换
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.$parent.setPage(val)
},
//选择项
handleSelectionChange(val) {
this.multipleSelection = val;
this.$parent.delXuan(val);
console.log(val)
}
},
mounted() {
}
}
</script>
<style scoped lang="less">
#tables {
.pagination {
width: 100%;
height: 40px;
display: flex;
align-items: center;
border: #e6e6e6 1px solid;
border-top: none;
}
/**
改变边框颜色
*/
/deep/.el-table--border,
.el-table--group {
border: 1px solid #e6e6e6;
border-bottom: none;
}
/**
改变表格内竖线颜色
*/
/deep/.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: 1px solid #e6e6e6;
}
/**
改变表格内行线颜色
*/
/deep/.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid #e6e6e6;
}
/deep/.el-table thead tr th {
border-color: #e6e6e6;
}
}
</style>
2、父组件中配置使用
先看成品图：
使用：
<template>
<div id="PersonnelOnDuty">
<!-- 封装好的表格组件 -->
<!-- tableData表格数据 total数据总数量 isShowPage分页器是否显示 isSelection表格勾选框是否显示 -->
<Tables :data="tableData" :total="total" :isShowPage="true" :isSelection="true">
<!-- #operation 插槽对应的名称(列配置项声明的插槽名称) data插槽返回的行数据 -->
<template #operation='{data}'>
<el-button size="mini" icon="el-icon-edit" @click="addTable(data)" type="success">编辑</el-button>
</template>
</Tables>
</div>
</template>
<script>
import Tables from "../../components/tables.vue"
import {
} from "@/api";
export default {
name: "",
components: {
Tables,
},
data() {
return {
total: 0, //数据总数量
size: 10,
page: 1,
tableData: { //表格数据/参数
select: true,
tableHeader: [{ //表格头及对应列配置
label: "专家姓名",
prop: "equipmentName", //此列绑定的数据字段（索引）
// type: "slot", //类型插槽
width: 120,
// slotName: 'equipmentName' //插槽名称
},
{
label: "专家类别",
prop: "equipmentType",
width: 120,
// type: "slot",
// slotName: "equipmentType"
},
{
label: "职称",
prop: "charge",
width: 120,
// type: "slot",
// slotName: "charge"
},
{
label: "联系方式",
width: 120,
prop: "phone",
},
{
label: "操作",
width: 120, //列宽度
type: "slot", //列类型 slot插槽
slotName: 'operation' //插槽名称（html表格组件内声明此插槽）
}
],
tableList: [ //表格数据
{
equipmentName:'杨杨杨',
equipmentType:'化学专家',
charge:'公共卫生',
phone:'联系方式'
}
],
},
}
},
mounted() {
},
methods: {
// 编辑
addTable(row){
console.log(row) //编辑行数据
},
//表格勾选框勾选选择项触发
delXuan(e) {
console.log(e)
},
//表格每页数量改变触发
setSize(size) {
console.log(size)
},
//表格当前页数改变触发
setPage(page) {
console.log(page)
}
}
}
</script>
<style scoped lang="less">
</style>
以上代码我都做了详细备注，所以具体过程就不说了（主要是记录下方便以后自己使用），有需要可直接拿去使用。