vue应用el-tabel封装

<template>
    <div class="table">
        <el-table :data="tableList" style=" 100%" border :header-cell-style="tableStyleObj">
            <template v-for="(item,index) in config">
                <!-- 序号 -->
                <el-table-column v-if="item.type == 'index'" :key="index" type="index" :label="item.label" :width="item.width || 'auto'" :align="item.align || 'center'" />
                <!-- 操作 -->
                <el-table-column 
                    v-else-if="item.type == 'handel'"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width||'auto'"
                    :align="item.align||'center'"
                    :fixed="item.fixed"
                    >
                    <template slot-scope="{ row }">
                        <el-button v-for="(i,s) in item.btnLists" :key="s" :type="i.type||''" @click="handels(i.eventName,row)" :style="{color:i.color}">{{i.label}}</el-button>
                    </template>
                </el-table-column>
                <!-- 操作-附件 -->
                <el-table-column 
                    v-else-if="item.type === 'filesDown'"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width||'auto'"
                    :align="item.align||'center'"
                    :fixed="item.fixed"
                    >
                    <template slot-scope="{ row }">
                        <div class="fl-y"  v-for="(i,s) in row.urls" :key="s" >
                            <el-button type="text" @click="handelDownList(row,s)" :style="{color:i.color,'marginLeft':0}">{{i.name}}</el-button>
                        </div>
                    </template>
                </el-table-column>  
                <!-- 正文 -->
                <el-table-column
                    v-else
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width||'auto'"
                    :align="item.align||'center'"
                    :fixed="item.fixed"
                    >
                </el-table-column>
                <!-- show-overflow-tooltip 超出宽度后tooltip显示，但应用于操作项显示会有问题-->
            </template>
        </el-table>
    </div>
</template>
<script>
export default {
    props:{
        tableList:{
            type:Array,
            default:()=>[{name:'张三',sex:'男',address:'桃园路桃园小区205-3'},{name:'李四',sex:'女',address:'清华小区205-3'}]
        },
        config:{
            type:Array,
            default:()=>[{prop:'name',label:'姓名','120'},{prop:'sex',label:'性别'},{prop:'address',label:'住址'},
                {
                    type:'handel',
                    fixed:'right',
                    label:'操作',
                    '200',
                    btnLists:[
                        {
                            eventName:'handelAlert',
                            type:'text',
                            label:'文字',
                            color:'red'
                        },
                        {
                            eventName:'handelEmit',
                            type:'button',
                            label:'按钮',
                            color:'green',
                        }
                    ]
                }
            ]
        }
    },
    data(){
        return{
            tableStyleObj:{background:'#b3b3b3',color:'black'}
        }
    },
    methods:{
        handels(eventName,row){
            alert(JSON.stringify(row))
            if(eventName==='handelAlert') {
                alert('handelAlert()的逻辑')
            }else if(eventName==='handelEmit') {

                 this.$emit('funEmit',row)        //父组件接收子组件点击后传的当前行的数据

            }
        },
        handelDownList(row,s){
            console.log(row.urls[s])
            const link = document.createElement('a') // 创建a标签
            link.style.display = 'none' // 使其隐藏
            link.href = row.urls[s] // 赋予文件下载地址
            link.setAttribute('download', row.FileName) // 设置下载属性 以及文件名
            document.body.appendChild(link) // a标签插至页面中
            link.click() // 强制触发a标签事件
            return
        }
    }
}
</script>
<style lang="scss" scoped>
</style>