el-table 二次封装

[sailei1]

<!--
   <s_table  :loading="state.loading"  :data="state.items" :tableRowClassName="tableRowClassName" :colConfigs="colConfigs" :selectRow="selectRow" :selectHandle="selectHandle" :height="height"
                     v-model="cur" :pageSize="pageSize" :total="state.total" :loadDataFn="getList">

               <el-table-column slot="imgs" label="项目图片">
                   <template slot-scope="scope">
                       <img  class="img" v-for="item in scope.row.image_arr.images" :src="item.thumb" width="30" height="30" @click="showImage(scope.row,$event)"/>
                   </template>
               </el-table-column>

               <el-table-column slot="opt" label="操作">
                   <template slot-scope="scope">
                       <el-button type="text" @click="rejectItem(scope.row)" size="small">驳回</el-button>
                   </template>
               </el-table-column>
           </s_table>

           //配置
        colConfigs:[
                    { type:'selection',width:55},
                    { label: '项目ID/用户ID',width:100,component:{
                            props: ['colConfig'],
                            template: `<el-table-column :label="colConfig.label">
                                    <template slot-scope="scope">
                                      <p> {{scope.row.project_id}}</p>
                                      <p>{{scope.row.user_id}}</p>
                                   </template>
                                </el-table-column>`

                        }
                    },
                    { prop:'project_name',label: '项目名称',width:300,component:{
                            props: ['colConfig'],
                            template: `<el-table-column :label="colConfig.label">
                                        <template slot-scope="scope">
                                            <el-popover trigger="hover" placement="right" width="400">
                                                <h3>项目名称：{{scope.row.project_name}}</h3>
                                                <br>
                                                <div v-html="scope.row.project_content"></div>

                                                <div slot="reference" class="name-wrapper">
                                                    <el-tag class="el-tag--success " v-if="scope.row.is_volunteer == 1"><i>志愿者</i></el-tag>
                                                    <el-tag class="el-tag--success " v-if="scope.row.is_remark && scope.row.is_remark == 1">
                                                        <i><a style="color:red"  target="_blank">备注</a></i>
                                                    </el-tag>
                                                    <a class='raw' target="_blank">{{scope.row.project_name}}</a>

                                                </div>
                                            </el-popover>
                                        </template>
                                </el-table-column>`

                        }
                    },
                    {prop:'phone', label: '发起人手机号',width:100},
                    { label: '创建时间/重新提交时间',width:150,component:{
                            props: ['colConfig'],
                            template: `<el-table-column :label="colConfig.label">
                                    <template slot-scope="scope">
                                        <p v-if="scope.row.project_created != scope.row.resubmit_time"> {{scope.row.project_created}}</p>
                                        <p> {{scope.row.resubmit_time}}</p>
                                    </template>
                                </el-table-column>`

                        }
                    },
                    { slot: 'imgs' },
                    { slot: 'opt' }
                ],

                cur:'1',// 当前页数
                pageSize：20, //每页显示数量
                pageLayout：''//分页器显示控制，
                total：''//总条数
                loadDataFn:''//加载数据函数

 -->

<template>
    <div>
        <el-table  :data="data" v-loading="loading" class="s-table"
                   :row-class-name="tableRowClassName" :header-cell-style="getRowClass" @row-click="selectRow"
                   @selection-change="selectHandle"
                   @expand-change="rowExpand"
                   border
                   :height="height"
                   show-overflow-tooltip=true>
            <template v-for="colConfig in colConfigs">
                <slot v-if="colConfig.slot" :name="colConfig.slot"></slot>
                <component
                        v-else-if="colConfig.component"
                        :is="colConfig.component"
                        :col-config="colConfig">
                </component>
                <el-table-column v-else v-bind="colConfig"></el-table-column>
            </template>
        </el-table>

        <div class="s-paging">
            <el-pagination
                    :current-page.sync="cur"
                    :page-size="pageSize"
                    :layout="pageLayout"
                    :total.sync="total">
            </el-pagination>
        </div>

    </div>

</template>
<style lang="less" scoped>

    .s-table{
        background-color: transparent;
        font-size: 12px;
        clear:both;
        /deep/ .el-table__fixed-right-patch{
            background:#eef1f6 !important;
        }
        /deep/ table{
            td, th{
                padding:0px !important;
            }
            .cell{
                /*color: #475669;*/
            }
            .el-tag {
                padding: 0 3px!important;
                height: 18px!important;
                line-height: 18px!important;
            }
            .gutter{
                background:#eef1f6 !important;
            }

            .img {
                width: 40px;
                margin: 2px;
                position: relative;
                top: 3px;
            }
            tr, th {
                background-color: transparent !important;
                height: 40px;
                text-overflow: ellipsis;
                vertical-align: middle;
                position: relative;
            }
            .notice-row {
                background-color: oldlace !important;
            }
            .notice-row-2 {
                background-color: #f0f9eb !important;
            }
            .select-row {
                background-color: #ddd !important;
            }
        }

    }

    .s-paging{
        text-align:center;
        padding: 20px 0px;
    }

</style>
<script>
    import Vue from 'vue'
    import {Button,Input,Table,TableColumn,Icon,Popover,Tag,Pagination,Loading} from 'element-ui'
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Popover);
    Vue.use(Tag);
    Vue.use(Loading.directive);
    Vue.use(Pagination);
    Vue.use(Pagination);

    export default{
        data(){
            return{
                cur:1,
            }
        },
        props: {
            data: {
                type: Array,
                required: true
            },
            colConfigs:{
                type: Array,
                required: true
            },
            height:{
                type: [String, Number],
                // required: true
            },
            loading:Boolean,
            tableRowClassName:{
                type:Function,
                default:function(){}
            },
            selectHandle: {
                type:Function,
                default:function(){}
            },
            selectRow:{
                type:Function,
                default:function(){}
            },
            pageIndex:{
                type: [String, Number],
                required: true
            },
            pageLayout:{
                type: [String],
                default:'prev, pager, next, jumper'
            },
            pageSize:{
                type: [String, Number],
                required: true
            },
            total:{
                type: [Number],
                // required: true
            },
            loadDataFn:{
                type:Function,  //加载数据分页函数
                required:true

            },
            rowExpand:{  //折叠table
                type:Function,
                default:function(){}
            }

        },
        model: {
            prop: 'pageIndex',
            event: 'change'
        },
        components:{

        },
        mounted(){
            this.cur=this.pageIndex;
            // this.loadDataFn();

        },
        watch:{
            cur(v,ov){
                this.$emit('change',v);
                this.loadDataFn();
                let el= document.querySelector('.el-table__body-wrapper');
                if(el)el.scrollTop =0;

            },
            pageIndex(v,ov){
                this.cur=this.pageIndex;
            }

        },

        methods:{
            getRowClass({ row, column, rowIndex, columnIndex }) {
                if (rowIndex == 0) {
                    return 'background:#eef1f6 !important;'
                }
            }
        }
    }

</script>