el-table封装

el-table封装

子组件

        <el-table
            :data="tableData"
            style="width: 100%"
            border
            height='500'
            max-height='500'
            :header-cell-style=" {background:'#5987CF',color:'white',textAlign:'center',lineHeight:'30px',padding:'0'}"
            :cell-style="{'text-align':'center','line-height':'20px'}"
            >
            <!-- 单选多选框插槽 -->
            <slot name="chekAll"></slot> 
            <el-table-column
            v-for="item,index in tableTitle"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :fixed="item.fixed"
            >
            <template slot-scope="scope">
            <!-- 特殊需求 -->
                <slot name="demand" :scope="scope" :item="item"></slot>
            </template>
            </el-table-column>
    </el-table>

父组件

 <Table :tableTitle="tableTitle" :tableData="tableData">
                <template #chekAll>
                    <el-table-column type="selection" width="55"></el-table-column>
                </template>
                <template v-slot:demand="{scope,item}">
                    <el-input v-if="item.prop == 'sy_jianshu'" v-model="scope.row.prop" />   
                    <el-button v-else-if="item.label == '操作'">删除</el-button>    
                    <span v-else>{{scope.row[item.prop]}}</span>         
                </template>
            </Table>