封装elemtui table表格组件

封装elemtui table表格组件

Vue.component('mytable', {
    props:{
        table_list:{
            type:Array,
            default:()=>[]
        },
        align:{
            type:String,
            default:'center'
        },
        table_rules:{
            type:Array,
            default:()=>[]
        },
        height:{
            type:String,
            default:'200'
        },
        show_summary:{
            //是否在表尾显示合计行
            type:Boolean,
            default:false
        },
        default_expand_all:{
            type:Boolean,
            default:false
        },
        tree_props:{
            type:Object,
            default:()=>{}
        },
    },
    template: `
        <el-table
            ref="table"
            :height="height"
            :data="table_list"
            header-row-class-name="header_row_style"
            cell-class-name="cell_class_name"
            border
            :align="align"
            size="small"
            style="width: 100%;"
            :default-expand-all="default_expand_all"
            row-key="id"
            :tree-props="tree_props"

            >
            <el-table-column
                v-for="(item,index) in table_rules" :key="index"
                :label="item.label"
                :prop="item.prop"
                :type="item.type"
                :width="item.width"
                :min-width="item.width"
                :fixed="item.fixed"
                :show-overflow-tooltip="item.show_overflow_tooltip"
                :formatter="item.formatter"
                >
                <template v-if="item.slot" v-slot="slotProps">
                    <slot :name="item.slot" :slotProps="slotProps.row"></slot>
                </template>
                <el-table-column
                    v-for="(itemy,indexy) in item.children" :key="indexy"
                    :label="itemy.label"
                    :prop="itemy.prop"
                    :width="itemy.width"
                    :min-width="itemy.width"
                    :fixed="itemy.fixed"
                    :show-overflow-tooltip="item.show_overflow_tooltip"
                    :formatter="itemy.formatter"
                    >
                    <template v-if="itemy.slot" v-slot="slotProps">
                        <slot :name="itemy.slot" :slotProps="slotProps.row"></slot>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
    `,

    data:function(){
        return {

        }
    },
    methods:{
    
    },
    mounted(){
    }
})