vue之表单的详情回显数据

InputShow.vue

<!-- 简单显示 -->
<!-- 下拉菜单 -->
<template>
  <div class="input_show clear_fix" @mouseover="mouseover" @mouseout="mouseout">
    <div class="input_show_title" :style="`width: ${labelWidth}`">
      <span class="xSelect_check" v-show="isCheck"></span>
      {{ title }}
    </div>
    <div
      class="input_show_con_h text_ellipsis"
      v-show="hover"
      :style="`width: calc(100% - ${labelWidth})`"
    >
      {{ value }}
    </div>
    <div class="input_show_con" :style="`width: calc(100% - ${labelWidth})`">
      {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  name: "InputShow",
  components: {},
  props: {
    title: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    isCheck: {
      type: Boolean,
      default() {
        return false;
      },
    },
    isHover: {
      type: Boolean,
      default() {
        return false;
      },
    },
    labelWidth: {
      type: String,
      default: "120px",
    },
    titleType: {
      type: String,
      title: "",
    },
  },
  data() {
    return {
      hover: false,
    };
  },
  methods: {
    mouseover() {
      if (this.titleType === "contractno") {
        this.hover = true;
      }
    },
    mouseout() {
      if (this.titleType === "contractno") {
        this.hover = false;
      }
    },
  },
};
</script>
<style  lang="scss" scoped>
.input_show {
  position: relative;
  width: 100%;
  cursor: not-allowed;
  display: flex;
  .input_show_title {
    height: 32px;
    line-height: 32px;
    text-align: right;
    position: relative;
    //是否检验
    .xSelect_check {
      position: relative;
      &:before {
        position: absolute;
        top: -7px;
        left: -9px;
        content: "*";
        color: #f56c6c;
      }
    }
  }
  .input_show_con {
    padding-left: 10px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #e4e7ed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: not-allowed;
  }
  .input_show_con_h {
    position: absolute;
    top: -15px;
    right: 0px;
    width: 100%;
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    color: #303133;
    text-align: right;
  }
}
</style>

实现方式1：使用组件

<template>
  <div>
    <div>home</div>
    <div class="home_body">
      <div
        v-for="(item, name, index) in inputConfig"
        :key="index"
        class="input_item"
        :class="'input_item_' + name"
      >
        <slot :name="name" v-if="item.slot" :class="name">
          <div class="info_title small_title">{{ item.infoTitle }}</div>
        </slot>
        <template v-else>
          <InputShow
            :class="name"
            :key="name"
            :title="item.title"
            :value="inputParams[name]"
            :labelWidth="item.labelWidth"
            :isCheck="item.isCheck"
            :isHover="item.isHover"
            :titleType="item.titleType"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import InputShow from "./InputShow.vue";
export default {
  name: "Home",
  components: {
    InputShow,
  },
  data() {
    return {
      inputConfig: {
        info0: {
          slot: true,
          infoTitle: "信息栏目0",
        },
        contractno: {
          title: "合同号：",
          labelWidth: "95px",
          isCheck: true,
          isHover: true,
          titleType: "contractno",
        },
        test: {
          title: "测试的值：",
          labelWidth: "95px",
        },
        lntype: {
          title: "业务品种：",
          labelWidth: "95px",
        },
        lind: {
          title: "业务子品种：",
          labelWidth: "95px",
        },
        info1: {
          infoTitle: "信息栏目1",
          slot: true,
        },
        amt: {
          title: "消费金额：",
          labelWidth: "95px",
        },
        info2: {
          slot: true,
          infoTitle: "信息栏目2",
        },
        amt2: {
          title: "消费金额2：",
          labelWidth: "95px",
        },
        amt3: {
          title: "消费金额3：",
          labelWidth: "95px",
        },
        amt4: {
          title: "消费金额4：",
          labelWidth: "95px",
        },
      },
      inputParams: {
        info0: "",
        contractno: "1",
        test: "2",
        lntype: "3",
        lind: "",
        info1: "",
        amt: "100",
        info2: "",
        amt2: "222",
        amt3: "333",
        amt4: "444",
      },
    };
  },
  created() {
    this.inputParams.lind = "170";
  },
  methods: {
  },
};
</script>
<style  lang="scss" scoped>
.home_body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .input_item {
    width: 33%;
    height: 30px;
    margin-bottom: 12px;
  }
  // 调整信息栏目
  ::v-deep .input_item_info0,
  ::v-deep .input_item_info1,
  ::v-deep .input_item_info2 {
    width: 100%;
  }
  .small_title {
    border-left: solid 4px #e82323;
    padding-left: 12px;
    font-size: 14px;
  }
}
</style>

实现方式2：使用组件

<template>
  <div>
    <div class="info-wrap">
      <!-- <div v-for="(item, index) in showArr" :key="index">
        <span>{{ item[0] }} ：</span>
        <span>{{ item[1] }}</span>
      </div> -->
      <template v-for="item in showArr">
        <InputShow
          class="input-show"
          :key="item[1].id"
          :title="item[1].title"
          :value="item[1].value"
          :labelWidth="item[1].labelWidth"
          :isCheck="item[1].isCheck"
          :isHover="item[1].isHover"
          :titleType="item[1].titleType"
        />
      </template>
    </div>
  </div>
</template>

<script>
import InputShow from "./InputShow.vue";
export default {
  name: "Home",
  components: {
    InputShow,
  },
  data() {
    return {
      showArr: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let obj = {
        a: {
          id: "01",
          title: "测试：",
          titleType: "test",
          value: "444",
          labelWidth: "100px",
          isCheck: true,
          isHover: true,
        },
        b: {
          id: "02",
          title: "测试2：",
          value: "555",
          labelWidth: "100px",
          isCheck: true,
        },
        c: {
          id: "03",
          title: "测试3：",
          value: "666",
          labelWidth: "100px",
          isCheck: false,
        },
        d: {
          id: "04",
          title: "测试4：",
          value: "777",
          labelWidth: "100px",
          isCheck: false,
        },
      };
      // Object.entries 遍历数据，把每一个数据拆分为一个数组，对象里面的嵌套对象化为二维数组元素(元素1)
      this.showArr = Object.entries(obj);
      console.log("res", this.showArr);
      // [['a', {
      //   id: "01",
      //   title: "测试：",
      //   titleType: "test",
      //   value: "444",
      //   labelWidth: "100px",
      //   isCheck: true,
      //   isHover: true,
      // }],['b',  {
      //   id: "02",
      //   title: "测试2：",
      //   value: "555",
      //   labelWidth: "100px",
      //   isCheck: true,
      // }],['c', {
      //   id: "03",
      //   title: "测试3：",
      //   value: "666",
      //   labelWidth: "100px",
      //   isCheck: false,
      // }]]
      obj.b.value = "bbb";
    },
  },
};
</script>
<style  lang="scss" scoped>
.info-wrap {
  display: flex;
  flex-wrap: wrap;
  .input-show {
    margin-bottom: 20px;
    width: 33%;
  }
}
</style>