vue使用el-table动态组件-slot自定义组件【插入某列按钮操作】

1、新建一个动态表格组件，CommonDynamicTable.vue

代码如下：

<template>
    <div>
        <el-table :data="tableData" size="mini" fit border  highlight-current-row 
          ref="multipleTable"  stripe :header-cell-style=" 
            {background:'rgba(249,253,255,1)'}"
            style="width: 100%;min-height: 55vh;"
            :row-style="{'font-size': '12px',color: '#212121'}"
            @selection-change="rowCheckAllChange"
            @sort-change="handleSort"
            @filter-change="filterHandler"
            @row-click="handleRowClick">
            <!-- 表头多选项 -->
            <el-table-column style="background:#E6F7FF;"
                type="selection"
                fixed="left"
                width="40">
            </el-table-column> 
            <el-table-column v-for="(th, key) in tableHeader"
                :key="key"
                :prop="th.prop"
                :label="th.label"
                :fixed="th.fixed"
                :sortable="th.sortable=='custom'?'custom':(th.sortable?true:false)"
                :filters="th.filters?th.filters:null"
                :column-key="th.columnKey"
                :filtered-value="th.filteredValue?th.filteredValue:null"
                :filter-multiple="th.filterMultiple"
                :min-width="th.minWidth" align="center">
                <template slot-scope="scope">
                    <!-- 自定义操作按钮项 -->
                    <slot :name="th.prop"  v-if="th.slot" :row="scope.row" 
                      :index="scope.$index"></slot>
                   
                    <el-tooltip v-else-if="th.clickFun" placement="bottom">
                        <div slot="content">{{ scope.row[th.prop] }}</div>
                        <!-- 点击跳转详情 -->
                        <span  style="color:#1890ff;cursor: pointer;" 
                             @click="toDetail(scope.row)" @click.stop>
                            {{ scope.row[th.prop] || '-' }}
                        </span>
                    </el-tooltip>
                    <span v-else>{{ scope.row[th.prop] || '-' }}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="table-box-pagination"
            @size-change="handleSizeChange"
            @current-change="pageCurrentChange"
            :current-page="pageParams.page"
            :page-sizes="[ 20, 30, 50, 100 ]"
            :page-size="pageParams.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageParams.total">
        </el-pagination>
    </div>
</template>

<script>
 // 非父子组件通信
 import VueEvent from '@/VueEvent/VueEvent.js'
 
  export default {
    name: 'common-dynamic-table',
    components: {  },
    props: {
      // 表格数据
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 表头数据
      tableHeader: {
        type: Array,
        default: function () {
          return []
        }
      },
      pageParams:{
        type: Object,
        default: function () {
          return {
              page:1,
              limit:20,
              total:0
          }
        }
      },
    },
    data() {
        return{ }
    },
    methods: {
        // 跳转到详情
        toDetail(row) {
            VueEvent.$emit('toChildDetail', row)
        },
        // 排序事件
        handleSort (sort) {
            this.$emit('sort-events', sort)
        },
        // 筛选事件
        filterHandler (filters) {
            this.$emit('filter-events', filters)
        },
        // 某一行被点击
        handleRowClick (row) {
            this.$emit('click-events', row)
        },
        //   复选框勾选
        rowCheckAllChange(val) {
            this.$emit('rowCheckAllChange', val)
        },
        // 分页
        handleSizeChange(size) {
            this.$emit('handleSizeChange', size)
        },
        pageCurrentChange(page) {
            this.$emit('pageCurrentChange', page)
        },
    }
  }
</script>

考虑到可能一张表格中存在多列操作项，使用slot插入自定义组件方式，通过v-slot:default="slotProps"来传参。

2、父组件中引入子组件【动态列表】，father.vue,代码如下：

<template>
  <div class="send_sms_result">
      <h2>动态表格</h2>
        <!-- 表格数据 -->
        <el-row>
            <div class="fixed_table">
                <CommonDynamicTable :tableData="tableData" :tableHeader="tableHeader" :pageParams="pageParams">
                    <template v-slot:download="slotProps">
                        <el-button @click="download(slotProps.row)">下载</el-button>
                    </template>
                    <template v-slot:btn="slotProps">
                        <el-button>确定</el-button>
                        <el-button @click="cancelClick(slotProps.row)">取消</el-button>
                    </template>
                </CommonDynamicTable> 
            </div>
        </el-row>
  </div>
</template>

<script>

import CommonDynamicTable from "@/pages/Order/components/CommonDynamicTable"

export default {
    name:"father",
    components:{CommonDynamicTable},
    data() {
        return {
            // 列表数据
            tableData:[
                {
                    NO:1,
                    send_time:'2020.11.20',
                    receive_email:'tetwet',
                    email_status_str:'2',
                    order_no:'4234234234234',
                    company:'testsetwet',
                    send_order_status:'ete',
                    send_official_status:'tete',
                },
                {
                    NO:2,
                    send_time:'2020.11.20',
                    receive_email:'tetwet',
                    email_status_str:'2',
                    order_no:'4234234234234',
                    company:'testsetwet',
                    send_order_status:'ete',
                    send_official_status:'tete',
                },
            ],
            tableHeader:[
                {
                    prop:'NO',
                    label:'编号',
                    fixed:'',
                    sortable:true,
                    filters:'',
                    columnKey:'',
                    filteredValue:'',
                    filterMultiple:false,
                    minWidth:'120',
                    
                   
                },{
                    prop:'send_time',
                    label:'发送时间',
                    fixed:'',
                    sortable:true,
                    filters:'',
                    columnKey:'',
                    filteredValue:'',
                    filterMultiple:false,
                    minWidth:'100',
                },{
                    prop:'receive_email',
                    label:'接收邮箱',
                    fixed:'',
                    sortable:true,
                    filters:'',
                    columnKey:'',
                    filteredValue:'',
                    filterMultiple:false,
                    minWidth:'100',
                },{
                    prop:'email_status_str',
                    label:'邮件状态',
                    fixed:'',
                    sortable:false,
                    filters:'',
                    columnKey:'',
                    filteredValue:'',
                    filterMultiple:false,
                    minWidth:'100',
                },{
                    prop:'order_no',
                    label:'订单',
                    fixed:'',
                    sortable:false,
                    filters:'',
                    columnKey:'',
                    filteredValue:'',
                    filterMultiple:false,
                    minWidth:'100',
                    clickFun:true,
                },{
                    prop:'company',
                    label:'公司名称',
                    fixed:'',
                    sortable:true,
                    filters:'',
                    columnKey:'',
                    filteredValue:'',
                    filterMultiple:false,
                    minWidth:'100',
                },{
                    prop:'send_order_status',
                    label:'发送时订单状态',
                    fixed:'',
                    sortable:true,
                    filters:'',
                    columnKey:'',
                    filteredValue:'',
                    filterMultiple:false,
                    minWidth:'100',
                },{
                    prop:'download',
                    label:'下载',
                    
                },{
                    prop:'btn',
                    label:'操作',
                    minWidth:'100',
                }
            ],
            //分页组件参数
            pageParams: {
                page:1,
                limit:20,
                total:0
            },
        }
    },
    methods: {
        cancelClick(row){
            console.log(row);
        },
      
        // 表格勾选复选框事件 --多选框
        rowCheckAllChange(val) {
            console.log(val);
            this.batchResendParams = val
        },
       
        //    每页显示条数修改
        handleSizeChange(val) {
            this.queryParams.limit = val
            this.getTableList(this.queryParams)
        },
        // 分页
        pageCurrentChange(val) {
            this.queryParams.page = val
            this.getTableList(this.queryParams)
        },
    },
    created() {}

}
</script>

中间件使用VueEvent.js：

// 非父子组件通信
import Vue from 'vue';
var VueEvent = new Vue();

export default VueEvent;