封装el-table的使用_el-table html写法

封装此公共组件通过具名插槽的方式来达到自定义table的效果

模板的html的写法：

    <div>
        <el-table
                :cell-style="{'text-align':'center'}"
                :data="tableData"
                border
                :header-cell-style="headerCellStyle"
                style="width: 100%"
                v-loading="loading">
            <template v-for="(col,index) in fieldList">
                <!--是否出现多选框的列-->
                <slot v-if="col.slot" :name="col.slot">
                </slot>
                <!--普通列-->
                <el-table-column v-else :key="index" :prop="col.prop" :label="col.label" :width="col.width"
                                 align="center">
                </el-table-column>
            </template>
        </el-table>
        <!-- 是否调用分页 -->
        <el-pagination v-if="pageObj"
                       layout="total, prev, pager, next, jumper"
                       :page-size="pageObj.size"
                       :total="pageObj.total"
                       :current-page="pageObj.currentPage"
                       @current-change="handlerPage()">
        </el-pagination>
 
    </div>

js的写法：

<script>
    export default {
        name: "commonTable",
        props:{
            //显示数据
            tableData:Array,
            //设置整个table表格的宽度
            width:String,
            //
            fieldList:Array,
            //设置多级表头的list
            setMultiLevelHeaderList:Array,
            loading:Boolean,
            //是否加上分页
            pageObj:Object,
            headerCellStyle:headerCellStyle
        },
        methods:{
            handlerPage(val){
                this.$emit('handlerPage',val);
            }
        }
    }
</script>

如何使用html的写法:

<!--使用封装之后的公共表格-->
<common-table :tableData="classroomTableData"  @handlerPage="handlerPage" :headerCellStyle="headerCellStyle" :loading="loading" :pageObj="pageObj" width="100%" :fieldList="fieldList">
    <el-table-column slot="多选" type="selection" width="55">
    </el-table-column>
    <el-table-column
            label="操作"
            slot="操作"
    >
        <template slot-scope="scope">
            <el-button type="text">详情</el-button>
            <el-button type="text">修改名称</el-button>
        </template>
    </el-table-column>
    <el-table-column
            prop="studentAddClassroomSetting"
            label="学生加班设置"
            slot="下拉选框"
    >
        <template slot-scope="scope">
            <el-select size="small" v-model="classroomValue" @change="selectClassType"   placeholder="请选择" >
                <el-option
                        v-for="item in classroomList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
 
        </template>
    </el-table-column>
    <el-table-column
            prop="studentChangeName"
            label="允许学生改名"
            slot="switch"
    >
        <template slot-scope="scope">
            <el-switch
                    v-model="nameChangeAllowed"
                    active-text="开"
                    inactive-text="关">
            </el-switch>
        </template>
    </el-table-column>
 
</common-table>

js的写法：

<script>
    import {EventBus} from "../../../assets/static/global/event-bus";
    import dayjs from 'dayjs'
    import coassRoomManagementSon from './coassRoomManagementSon'
    export default {
        name: "classRoomManagement",
        components:{
          coassRoomManagementSon
        },
        data(){
            return{
                headerCellStyle:{
                    background: '#faf6fa',
                    color: '#fff6f9',
                    fontWeight: 'bolder',
                    textAlign: 'center',
                },
                fieldList:[
                    {slot:'多选'},
                    {label:'班级名称',prop:'classroom'},
                    {label:'班级类型',prop:'classType'},
                    {label:'所属年级',prop:'grade'},
                    {label:'学生人数',prop:'studentCount'},
                    {label:'班主任',prop:'headMaster'},
                    {slot:'操作'},
                    {slot:'下拉选框'},
                    {slot:'switch'}
                ],
                pageObj:{
                    size:40,
                    totla:0,
                    currentPgae:1,
                    func:'func'
                },
                loading:false,
                form:{
                    schoolName:'',
                    grade:[],
                    gradeValue:'',
                    subjectList:[],
                    nameMode:[],
                    subjectValue:'',
                    jbSettingList:[],
                    studentChangeAllowed:'开'
                }，
                //班级表格的数据
                classroomTableData:[
                    {
                        classroom:'2班',
                        classType:'教学班',
                        grade:'高一',
                        studentCount:233,
                        headMaster:'高老师',
 
                    },
                    {
                        classroom:'2班',
                        classType:'教学班',
                        grade:'高一',
                        studentCount:233,
                        headMaster:'高老师',
 
                    }
                ]
            },
            methods:{
                handlerPage(val){
                    console.log('获取页数'+val);
                }    
            }
       }