element-ui的form居中， label自适应宽度，el-select和el-input一样宽，整体在dialog居中,el-select默认选中第一项

效果图

代码部分：
1.整体form在dialog中居中

::v-deep .el-dialog .el-dialog__body{
      display: flex;
      justify-content: center;
      align-items: center;
}

为什么要使用 ::v-deep来穿透样式？
因为是scoped样式lang=“scss” 写了 /deep/不生效 以后就写::v-deep

注意点：
::v-deep与后面写的选择器中间要有空格

2.label宽度自适应

设置label-width=“auto”

3.el-select和el-input一样宽
直接给el-select加上 style=“width:100%;”

<el-form-item label="是否有效">
    <el-select v-model="roleForm.status" style="width:100%;">
        <el-option 
        v-for="item in statusList" 
        :key="item.id" 
        :label="item.name" 
        :value="item.id"></el-option>
    </el-select>
</el-form-item>

4.el-select默认选中第一项

• 静态获取数据

<el-form-item label="是否有效">
    <el-select v-model="roleForm.status" style="width:100%;">
        <el-option 
        v-for="item in statusList" 
        :key="item.id" 
        :label="item.name" 
        :value="item.id"></el-option>
    </el-select>
</el-form-item>

statusList:[
    {id:1,name:'有效'},
    {id:2,name:'无效'}
]

created(){
    //select默认选中第一个
    this.roleForm.status = this.statusList[0].id;
},

完整代码：

<el-dialog
    title="添加角色"
    :visible.sync="roleDialogVisible"
    width="30%"
    >
    <el-form 
    size="small"
    style="width:70%"
    :model="roleForm" 
    class="demo-form-inline" 
    label-width="auto">
        <el-form-item label="角色编码">
            <el-input v-model="roleForm.roleCode"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
            <el-input v-model="roleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色类型">
            <el-select v-model="roleForm.roleType" placeholder="请选择" style="width:100%;">
                <el-option 
                v-for="item in roleTypes"
                :key="item.id"
                :label="item.name" 
                :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="是否有效">
            <el-select v-model="roleForm.status" style="width:100%;">
                <el-option 
                v-for="item in statusList" 
                :key="item.id" 
                :label="item.name" 
                :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="描述">
            <el-input v-model="roleForm.roleDescription"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="roleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="roleDialogVisible = false">确 定</el-button>
    </span>
</el-dialog>