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>

總結

以上是生活随笔為你收集整理的elementUI vxe-table结合使用（通用表格）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。