<template>
     <el-dialog title="xxx" :visible.sync="dialogVisible" 
        center @close="handleDialogClose">
        <div class="line"></div>
        <div class="sample-con">
        </div>
    </el-dialog>
</template>
<script>
export default {
props:{
    type:{
        type:String,
        default:''
    },
    dialogVisible:{
        type:Boolean,
        default:false
    }
},
data(){
    return{
    }
},
methods:{
    handleDialogClose() {
            this.$emit('update:visible', false);
        },
}
}
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
    height: auto;
    width: auto;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
    .el-dialog__header {
        padding-top: 27px;
        font-size: 16px;
        font-family: "MiSansMedium" !important;
        line-height: 22px;
        .el-dialog__title {
            color: #fff;
        }
    }
}
:deep(.el-dialog--center .el-dialog__body) {
    padding: 0 !important;
    /* width:300px !important; */
}
.line {
    width: 100%;
    height: 2px;
    background: #FFFFFF;
    opacity: 0.08;
    margin-top: 9px;
}
 .sample-con{
    width: 800px;
    height: 300px;
    border: 1px solid red;
 }
</style>关键代码css:
height: auto;
width: auto;
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
overflow: visible !important; //可加可不加
然后根据
:deep(.el-dialog--center .el-dialog__body) {
padding: 0 !important;
/* width:300px !important; */ 撑开宽度
}
或者:
.sample-con{
width: 800px; 内部元素撑开宽度
}