el-dialog宽度根据内容撑开

<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; 内部元素撑开宽度

}