vue + elementUi 响应式表单，label位置变换

<template>
    <el-form ref="form" :model="baseInfo" label-width="120px" :label-position="isMobileSize ? 'top' : 'left'">
        <div class="shadow-box" style="margin: 2rem 0;padding:2rem 1rem;">
            <el-divider content-position="left"><b>基础信息</b></el-divider>

            <el-row>
                <el-col :xs="24" :sm="24" :md="12">
                    <el-form-item label="姓名" >
                        <el-input class="form-input" v-model="baseInfo.name"  :disabled="true" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12">
                    <el-form-item label="性别" >
                        <el-select class="form-input"  v-model="baseInfo.sex" placeholder="请选择性别" :disabled="true">
                            <el-option
                                    v-for="item in sexArr"
                                    :label="item.label"
                                    :key="item.value"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12">
                    <el-form-item label="证件类型" prop="idCardType" required>
                        <el-select class="form-input"  v-model="baseInfo.idCardType" placeholder="请选择证件类型" :disabled="true" >
                            <el-option
                                    v-for="item in certificatesTypeOptions"
                                    :label="item.name"
                                    :key="item.code"
                                    :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12">
                    <el-form-item label="证件号码" >
                        <el-input class="form-input" v-model="baseInfo.idCard"  :disabled="true" />
                    </el-form-item>
                </el-col>
            </el-row>
        <div class="t-center">
            <div class="line"></div>
            <el-button type="primary"  @click="submitForm('form')" size="medium">保存并下一步</el-button>
        </div>

        <el-dialog :visible.sync="dialogVisible">
            <img v-if="dialogImageUrl" width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </el-form>

</template>

data(){
  return{
    isMobileSize:false, //是否是手机尺寸
   }
}

methods:{
    getDeviceSize(){
                let winW = window.innerWidth;
                console.log(winW)
                if(winW < this.$stateCodesList.mobileSize){
                    this.isMobileSize = true
                }else{
                    this.isMobileSize = false
                }
            },
}



  mounted() {
            this.getDeviceSize();
            window.addEventListener('resize',()=>{
                this.getDeviceSize();
            })

            this.headers ={Authorization : 'Bearer '+(sessionStorage.getItem('token') || '')}
        },