用el-form封装一个el-dialog组件

效果如下

里面的数据都一个el-from里面循环出来的,要是css布局麻烦,第一个el-from-item占据整行,剩下的两个一行

// css代码
.el-form-item {
        flex-grow: 1;
        width: 50%;  //两个元素占一行
        &:first-child {
          flex-grow: 7 !important;
          width: 100%;  // 第一个元素占据整行
        }
    }

封装组件的整个代码

<template>
  <el-dialog
    :title="title"
    :visible="visible"
    @update:visible="handleUpdateVisible"
    :width="width"
    custom-class="person_info"
  >
    <div class="form-list">
      <el-form :label-position="labelPosition" :label-width="labelWidth">
        <el-row class="form-item">
          <el-form-item v-for="(item, i) in data" :key="i" :label="item.label">
            <slot :name="item.prop" :item="item" :$index="i">{{ getContent(item.value, item.prop) }}</slot>
          </el-form-item>
        </el-row>
        <div align="center" class="btn">
          <el-button @click="visible=false" plain>关闭</el-button>
        </div>
      </el-form>
      <el-divider direction="vertical"></el-divider>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "person-info",
  props: {
    value: {},
    width: {
      type: String,
      default: "30%"
    },
    title: {
      type: String,
      default: "账号信息"
    },
    data: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: [Number, String],
      default: "90px"
    },
    labelPosition: {
      type: String,
      default: "left"
    },
    dataMap: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    handleUpdateVisible(val) {
      this.visible = val
      this.$emit("input", val)
    },
    getContent(value, prop) {
      const { dataMap } = this

      if (prop && dataMap[prop]) {
        return dataMap[prop][value]
      } else {
        return value
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        if (this.visible !== val) {
          this.visible = val
        }
      }
    }
  }
}
</script>
<style lang="scss">
.person_info {
  border-radius: 10px;
  .form-list {
    position: relative;
    margin: 0 0 40px 40px;
    .form-item {
      flex-wrap: wrap;
      .el-form-item {
        flex-grow: 1;
        width: 50%;
        &:first-child {
          flex-grow: 7 !important;
          width: 100%;
        }
        &:nth-child(3),
        &:nth-child(5),
        &:nth-child(7) {
          .el-form-item__label {
            padding: 0 0 0 20px !important;
          }
        }
      }

      .el-form-item__content {
        &:first-child {
          margin-left: 0 !important;
          flex-grow: 7;
          color: #008cd6;
          font-size: 20px;
          font-weight: 500;
        }
      }
    }
    .el-divider--vertical {
      position: absolute;
      margin: 0;
      top: 48px;
      height: 50%;
      left: 250px;
    }
    .btn {
      margin: 30px 0 -20px 0;
    }
  }
  .el-dialog__header {
    background: #f2f9fd !important;
    border-radius: 10px;
    border-bottom: none;
  }
  .el-dialog__title {
    font-weight: 500;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>

然后引入,注册使用

使用栗子:

//在HTML里面
    <person-info
      v-model="detail.visible"
      width="600px"
      label-width="90px"
      :title="detail.title"
      :data="detail.data"
      :data-map="maps"
    ></person-info>

在data里面定义一下

detail: {
        visible: false,
        title: "账号信息",
        data: []
      }

然后在methods里面获取数据

   handelPwuTransfer(row) {
      this.detail.visible = true
      this.detail.data = [
        { label: "", value: row.pwuName },
        { label: "姓名:", value: row.pwuName },

        { label: "所属部门:", value: row.rate },
      ]
      }