Vue+ElementUI - Dialog 对话框样式

1. 预览图

修改好的Dialog样式，预览图如下：

2. 标签属性和ID

<div id="dialog" class="margin-top: 0px !important;">
	<el-dialog title="学生信息" :visible.sync="updateVisible">
		<el-form :model="dataForm" @submit.native.prevent>
            <el-form-item label="姓名" :label-width="formLabelWidth" class="label2">
               	<el-input v-model="dataForm.name" autocomplete="off" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" class="label2">
                <el-select v-model="dataForm.sex" placeholder="请选择性别" class="elselect">
                	<el-option v-for="item in sexList" :label="item.label" :value="item.id" :key="item.id"></el-option>
                 </el-select>
            </el-form-item>
		</el-form>
        <div slot="footer" class="dialog-footer">
        	<el-button @click="updateVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateVisible = false">确 定</el-button>
        </div>
	</el-dialog>
</div>

3. JS

以下的 JS 不是必要的，主要怕复制上述代码时报错，所以大家按需采纳
主要是看上述标签里的id和class属性

<script>
    export default {
        data() {
            return {
                updateVisible: false,  //  控制更新对话框的显示
                formLabelWidth: '120px',
                dataForm: {
                    name: '',
                    sex: ''
                },
                sexList: [  //  性别下拉框内容
                    {id: 1, label: '男'},
                    {id: 2, label: '女'}
                ]
            }
        }
    }
</script>

4. CSS

#dialog .el-dialog {
    width: 35%;
    margin-top: 7vh !important;
}

#dialog .el-dialog__header {
    padding: 20px 20px 0px;
    text-align: left;
}

#dialog .el-dialog__body {
    padding: 15px 20px;
}

#dialog .el-dialog__body .label2 .el-form-item__label {
    position: relative;
    right: 14px;
}

#dialog .el-form-item {
    text-align: left;
    margin-bottom: 15px;
}

#dialog .el-form-item__label {
    width: 155px !important;
}

#dialog .el-input {
    width: 58%;
}

#dialog .elselect .el-input {
    width: 89%;
}

#dialog .el-dialog__footer {
    padding: 0px 20px 20px;
}

#dialog .el-select {
    width: 65%;
}