App.vue 样式

.my-main{margin: 20px;
}
.dfc{display: flex;flex-direction: column;
}
.dfr{display: flex;flex-direction: row;
}
.f1{flex: 1;
}
.fl{float: left;
}
.fr{float: right;
}
.baseColor{background-color:RGB(48,65,86);color:#fff;
}

父组件

<!--  -->
<template><div class='f1 dfc my-main'><TableTemplate:cols="columns":tData="tableData":pager="total"@pageTrigger="pageChange":search="'fname'":operation="'add,export,seq,del,pager'"@searchTrigger="search"@operationTrigger="operation"></TableTemplate></div>
</template><script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import TableTemplate from '@/views/dashboard/tableTemplate'
export default {
//import引入的组件需要注入到对象中才能使用
components: {TableTemplate
},
data() {//这里存放数据return {// 表头columns: [{l: '公司名称',p: 'fname',w: null},{l: '编号',p: 'number',w: null},{l: '性别',p: 'sex',w: null},],// 表数据tableData: [{fname: 'feng',number: '001',sex: 0},{fname: 'xiao',number: '123',sex: 1},{fname: 'llll',number: '244',sex: 1}],// 总条数total: null,};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {init(){this.total = this.tableData.length},// 搜索search(form) {console.log('搜索', form)},// 表格操作operation(data) {console.log('表格操作', data)},// 分页pageChange(data){console.log("切换页数据", data);// 根据 page size 请求数据}},
//生命周期 - 创建完成（可以访问当前this实例）
created() {this.init()},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类</style>

子组件–通用表格

<!--  -->
<template><div class='f1 dfc'><div class="dfr" style="    margin-bottom: 20px;"><div class="fl f1 dfr"><div style="display: inline-flex;" v-if="isIncluded('fname')"><span class="title">公司名称：</span><el-inputplaceholder="请输入内容"suffix-icon="el-icon-search"v-model="searchForm.fname"></el-input></div><div style="display: inline-flex;" v-if="isIncluded('number')"><span class="title">编号：</span><el-inputplaceholder="请输入内容"suffix-icon="el-icon-search"v-model="searchForm.number"></el-input></div><el-buttonv-if="search.length !== 0"@click="handleSearch"class="baseColor">搜索</el-button></div><div class="fr"><el-button type="success" icon="el-icon-plus"v-if="isIncluded('add')"@click="add"></el-button><el-button type="primary" v-if="isIncluded('export')"class="baseColor"@click="openExportEvent">导出</el-button><el-button type="primary" v-if="isIncluded('import')"class="baseColor"@click="importDataEvent">导入</el-button></div></div><div class="f1 dfc"><vxe-tableborderstripealign="center"ref="xTable"class="f1"highlight-hover-row:loading="loading":data="tData":export-config="{}"><vxe-columnv-if="isIncluded('seq')"type="seq"title="序号"width="60"/><template v-for="(col, index) in cols"><vxe-columnv-if="col.p === 'sex'":key="index":field="col.p":width="col.w":title="col.l":formatter="formatterSex"/><vxe-columnv-else:key="index":field="col.p":width="col.w":title="col.l"/></template><vxe-table-column title="操作" width="150px" align="center" fixed="right" v-if="!isIncluded('noOperation')"><template #default="{ row }"><el-button type="primary" icon="el-icon-edit"v-if="isIncluded('edit')"@click="handleOption(row, 'edit')"></el-button><el-button type="danger" icon="el-icon-delete"v-if="isIncluded('del')"@click="handleOption(row, 'del')"></el-button><el-button type="success" icon="el-icon-view"v-if="isIncluded('check')"@click="handleOption(row, 'check')"></el-button><el-button type="success" icon="el-icon-setting"v-if="isIncluded('setting')"@click="handleOption(row, 'setting')"></el-button></template></vxe-table-column></vxe-table><!-- 分页 --><vxe-pagerperfectv-if="isIncluded('pager')":current-page="tablePage.currentPage":page-size="tablePage.pageSize":page-sizes="tablePage.pageSizes":total="tablePage.totalResult"@page-change="pageChange":layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"></vxe-pager></div></div>
</template><script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';export default {
//import引入的组件需要注入到对象中才能使用
props:{// 接收父组件传过来的搜索的字段search: {type: String,default: "",},// 接收父组件传过来的操作的按钮operation: {type: String,default: "",},// 表头cols: Array,// 表数据tData: Array,// 分页总数pager: Number,
},
components: {},
data() {//这里存放数据return {searchForm:{fname: null,number: null,},// 分页tablePage: {currentPage: 1,pageSize: 2,pageSizes: [2, 4, 6, 8],totalResult: this.pager},loading: false,sexList: [{label: "男",value: 1,},{label: "女",value: 0,}],};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {init(){this.tablePage.totalResult = tData},// 根据页切换pageChange(val){this.tablePage.currentPage = val.currentPagelet page = val.currentPagelet limit = val.pageSizethis.$emit("pageTrigger", { page: val, form: this.searchForm });},// 判断显示isIncluded(str) {const searchArr = this.search.split(",");const operationArr = this.operation.split(",");if (searchArr.includes(str)) return true;if (operationArr.includes(str)) return true;return false;},// 点击搜索返回搜索内容给父组件handleSearch() {this.$emit("searchTrigger", this.searchForm);},// 点击表格中操作按钮handleOption(row, action) {this.$emit("operationTrigger", { row, action });},// 新建add(){console.log('add');},// 导出openExportEvent(){this.$refs.xTable.openExport()},// 导入importDataEvent () {this.$refs.xTable.importData()},formatterSex({ cellValue }) {let item = this.sexList.find((item) => item.value === cellValue);return item ? item.label : "";},},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
span.title{margin-left: 15px;line-height: 40px;
}
.el-input{flex: 1;
}
.el-button{float: left;border: none;
}
</style>