在寫這個表格組件之前，要了解?slot 插槽的使用。

目錄

子組件：子組件調用父組件的方法?this.$parent.方法名

1. 父組件（普通表格）：

2. 父組件（表格中的某一項數據需要修改）?

3. 父組件（帶操作列的表格）：

---

子組件：子組件調用父組件的方法?this.$parent.方法名

<template><div id="table" class="bg pd20"><!-- 表格 --><el-table :data="tableData" border class="myTable" :header-cell-style="{background:'#D9FFF2'}" style="width:100%"><!-- 表格擴展 --><el-table-column type="expand" width="30"><template slot-scope="props"><el-form label-position="left" inline class="demo-table-expand clear"><template ><el-form-item v-for="(info, infoId) in tableInfo" :key="infoId" :label="info.value+'：'"><span>{{props.row[info.key]}}：</span></el-form-item></template></el-form></template></el-table-column><!-- 表格內容 --><el-table-column type="index" :index="indexMethod" width="60" label="序號" align="center"/><template v-for="(info, infoIndex) in tableInfo"><el-table-column :key="infoIndex" :prop="info.key" :label="info.value" align="center" :min-width="info.minWidth" show-overflow-tooltip ><!-- <slot :name="info.key" :data="info" :index="infoIndex"></slot> --><!-- 給插槽命名、傳值、序列號，使用插槽時記得傳dealData --><template slot-scope="scope"><slot :name="info.key" :data="scope.row" :index="infoIndex" v-if="info.dealData"></slot><span v-else>{{scope.row[info.key]}}</span></template></el-table-column></template> <!-- 是否需要操作列，默認不需要，需要時父組件設置operateShow，記得傳操作這一列的寬度，否則默認寬為200 --><el-table-column v-if="operateShow" label="操作" align="center" :min-width="operateWidth" fixed="right"><template slot-scope="scope"><slot name="operate" :data="scope.row"></slot></template></el-table-column> </el-table><!-- 分頁 --><pagination :total="total" @pageChange="pageChange" :pageNum="page.pageNum"></pagination></div> </template><script> import pagination from '@/components/pagination'; export default {components: {pagination},props:{tableData: { //el-table組件綁定的數據type: Array,require: true},tableInfo: { //表格顯示的字段和字段名稱type: Array,require: true},total: { //頁碼總數type: Number,require: true,default: 0},operateShow: { //操作欄是否顯示，默認不顯示type: Boolean,default: false},operateWidth: { //操作欄寬type: String,default: "200"}},data() {return {page: { //表格字段pageNum: 1,pageSize: 10 }}},watch: {'total': function(newV, oldV){this.total = newV;},'$parent.searchForm.pageNum': function(newV, oldV){this.page.pageNum = newV;}},methods: {//表格自定義序號indexMethod(index) {return (this.page.pageNum-1)*this.page.pageSize +(index+1) ;},//分頁pageChange(val) {this.page.pageNum = val; //給組件中的pageNum傳值，自定義序號會用到this.$parent.initData(val); //調用父頁面的initData方法},} } </script>

---

1. 父組件（普通表格）：

<template><div class="bg"><my-table :tableData="tableData" :tableInfo="tableInfo" :total="total"></my-table></div> </template><script> import myTable from '@/components/table'; export default {components: {myTable},data() {return {searchForm:{ //請求參數endTime:"2021-07-15",startTime:"2020-07-01",pageNum:1,pageSize:10},total: 0, //頁碼需要的參數tableData: [], //后臺傳過來的數據tableInfo: [{key: "firstLabelQr", value: "首QR", "minWidth": 180},{key: "lastLabelQr", value: "末QR", "minWidth": 180},{key: "skuId", value: "SKU_ID", "minWidth": 160},{key: "skuName", value: "產品名稱", "minWidth": 160},{key: "totalNum", value: "標簽總數", "minWidth": 90},{key: "realNum", value: "實貼標數", "minWidth": 90},{key: "voidNum", value: "廢標數", "minWidth": 90},{key: "activeTime", value: "上傳時間", "minWidth": 150}]}},methods: {initData(pageNum){ //參數用于table組件，父級頁面使用該函數時不需要傳參this.searchForm.pageNum = pageNum ? pageNum : 1; //這行語句必填。this.$axios.post(this.$api.listQrIntegral, this.searchForm).then( res =>{this.tableData = res.datas.records;this.total = res.datas.total;})}},created(){this.initData();} } </script>

?如果覺得?this.searchForm.pageNum = pageNum ? pageNum : 1; //這行語句必填。 這樣寫太難理解，也可以這樣：

methods: {initData(pageNum){ //參數用于table組件this.searchForm.pageNum = pageNum; //這行語句必填。原因是參數有可能是子組件中的分頁傳過來的參數this.$axios.post(this.$api.listQrIntegral, this.searchForm).then( res =>{this.tableData = res.datas.records;this.total = res.datas.total;})}},created(){this.initData(1); //在這里傳參，初始默認pageNum為1}

2. 父組件（表格中的某一項數據需要修改）?

注意：tableInfo 傳參的時候，給要修改的那一項添加： dealData: true。

<div class="bg"><my-table :tableData="tableData" :tableInfo="tableInfo" :total="total"><tepmlate slot="activeTime" lot-scope="myProps"><span v-if="myProps.data.activeTime">{{myProps.data.activeTime}}</span><span v-else>2021-12-19</span></template></my-table> </div>data() {return {searchForm:{ //請求參數endTime:"2021-07-15",startTime:"2020-07-01",pageNum:1,pageSize:10},total: 0, //頁碼需要的參數tableData: [], //后臺傳過來的數據tableInfo: [{key: "firstLabelQr", value: "首QR", "minWidth": 180},{key: "lastLabelQr", value: "末QR", "minWidth": 180},{key: "activeTime", value: "上傳時間", "minWidth": 150, dealData: true}] //dealData: true，給要處理的某條數據添加這個屬性和屬性值。}},methods: {initData(pageNum){ //參數用于table組件，父級頁面使用該函數時不需要傳參this.searchForm.pageNum = pageNum;this.$axios.post(this.$api.listQrIntegral, this.searchForm).then( res =>{this.tableData = res.datas.records;this.total = res.datas.total;})}},created(){this.initData(1);}

3. 父組件（帶操作列的表格）：

<div><!-- 如果有操作項，父組件設置operateShow，操作欄最小寬度：operateWidth（可不傳） --><my-table :tableData="tableData" :tableInfo="tableInfo" :total="total" operateShow operateWidth="130"><template slot="operate" slot-scope="myProps"> <!-- 通過slot-scope來承載數據 --><el-button type="warning" size="mini" icon="el-icon-edit-outline" @click="delete(myProps.data.id)">下載</el-button></template></my-table> </div>data(){return {searchForm: { //請求參數endTime:"2021-07-15",startTime:"2020-07-01",pageNum: 1,pageSize: 10},total: 0, //頁碼需要的參數tableData: [], //后臺傳過來的數據tableInfo: [{key: "bill", value: "單號", "minWidth": 170},{key: "status", value: "生成狀態", "minWidth": 170},{key: "downloadCount", value: "下載次數", "minWidth": 170}]}},methods: {delete(id){console.log(id);//刪除數據的異步操作。常操作完會調用initData初始化數據，注意這里的傳參【注1】this.initData( 1 ); //},initData(pageNum){ //參數用于table組件，父級頁面使用該函數時不需要傳參 this.searchForm.pageNum = pageNum ; //這行語句必填。this.$axios.post(this.$api.downloadIntegralCode, this.searchForm).then( res =>{this.tableData = res.datas.records;this.total = res.datas.total;})}},created(){this.initData(1);}

注意：

如果刪除數據后，頁碼數直接跳轉到1，那么初始化數據的方法 this.initData(1); 中直接傳個1就可以了。

通常我們想要看到操作的那一頁，所以這里 initData 傳的參數要做一下處理。

?在公共的 js 文件中：

//返回表格操作時的頁數。 /*** * @param {*} name 操作類型* @param {*} total 總數，頁面中一般傳固定的值this.total* @param {*} pageNum 頁數，頁面中一般傳固定的值 this.search.pageNum* @param {*} pageSize 可省略，默認為10，若this.search.pageSize改變則需要傳* @returns */ const pageNum = (name, total, pageNum, pageSize=10) =>{//添加與其他操作不一樣，提前將頁數設置為還未生成的頁數，樣式不會生效。//因為頁碼是在調用接口生成數據后，得到total值才顯示；if(name=="add"){return pageNum;} else if(name=="update"){return Math.ceil( total/pageSize );} else if(name=="delete"){return Math.ceil( (total-1)/pageSize );} }export { pageNum }

使用：

import { pageNum } from "@/filters/common";delete(id){console.log(id);//刪除數據的異步操作。常操作完會調用initData初始化數據，注意這里的傳參【注1】this.initData( pageNum("delete", this.total) ); }

?注意：上面提到 添加的操作與其他操作不一樣，所以對它的傳參方式有幾種：

//方法一：保證代碼統一性，使用pageNum import { pageNum } from "@/filters/common"; add(id){console.log(id);//添加數據的異步操作。常操作完會調用initData初始化數據，注意這里的傳參this.initData( pageNum("add", this.total, this.searchForm.pageNum) ); }//方法二：便捷，直接傳參 add(id){console.log(id);//添加數據的異步操作。常操作完會調用initData初始化數據，注意這里的傳參this.initData( this.searchForm.pageNum ); }

總結

以上是生活随笔為你收集整理的vue 简单实用的elementUI表格封装的全部內容，希望文章能夠幫你解決所遇到的問題。

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