在写这个表格组件之前，要了解 slot 插槽的使用。
目录
1.子组件：子组件调用父组件的方法 this.$parent.方法名
2.父组件使用
2.1 父组件（普通表格）：
2.2 父组件（表格中的某一项数据需要修改）
2.3 父组件（带操作列的表格）：
注意：
1.子组件：子组件调用父组件的方法 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>2.父组件使用
2.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.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);}2.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 );
}
