vue 使用el-dialog展示详情，循环遍历进行内容展示，el-dialog默认样式更改

vue 使用el-dialog展示详情，循环遍历进行内容展示，el-dialog默认样式更改_不想学习只想玩的博客-CSDN博客

vue 使用el-dialog展示详情，循环遍历进行内容展示，el-dialog默认样式更改

 // 详细数据查看
            dialogDataForm: {
                dialog: false,
                title: '',
                visible: false,
                loading: false,
                timer: null,
                right: 'right',
                data: {},
                content: [
                    { label: '数据时间:', prop: 'buoyDatasj' },
                    { label: '平均波高:', prop: 'avgWaveHeight' },
                    { label: '平均波周期:', prop: 'avgWaveCycle' },
                    { label: '最大波波高:', prop: 'maxWaveHeight' },
                    { label: '最大波波周期:', prop: 'maxWaveCycle' },
                    { label: '有效波波高:', prop: 'effectiveWaveHeight' },
                    { label: '有效波波周期:', prop: 'effectiveWaveCycle' },
                   
                ]
            },

<!-- 弹窗 -->
        <el-dialog :title="dialogDataForm.title" :visible.sync="dialogDataForm.visible" :size="620" class="data-dialog">
            <el-form :model="dialogDataForm.data" label-width="130px" class="formgeo" :inline="true">
                <el-form-item v-for="(item, index) in dialogDataForm.content" :label="item.label" :key="index">
                    <span v-text="dialogDataForm.data[item.prop]"></span>
                </el-form-item>
            </el-form>
        </el-dialog>

/* 弹窗 */
.formgeo {
    text-align: left;
}

.formgeo /deep/ .el-form-item__content {
    width: 135px !important;
}

*/deep/.view-dialog>.el-dialog {
    margin-top: 15vh !important;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 2px 2px 5px #d0d0d0;
    width: 1439px;
}

*/deep/.view-dialog>.el-dialog>.el-dialog__header {
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: #F4F5F7;
    border-radius: 12px 12px 0px 0px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #252B3A;
    padding: 0 0 0 40px;
    padding-left: 0;
}

*/deep/.view-dialog>.el-dialog>.el-dialog__footer {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

*/deep/.dialog-form>.el-form-item {
    margin-bottom: 30px;
}

*/deep/.dialog-form>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
    width: 220px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #DCDEE2;
    border-radius: 3px;
}

*/deep/.dialog-form>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__inner {
    width: 220px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #DCDEE2;
    border-radius: 3px;
}



.view-dialog /deep/ .el-form-item__content {
    width: 250px;
}