sis_zhfx/src/views/Knowledge/knowinfo.vue

<template>
  <div class="know-info">
    <table class="table-card">
      <tr>
        <th>故障代码</th>
        <td>{{ infoObj.code }}</td>
        <th>故障标识</th>
        <td>{{ infoObj.faultid }}</td>
      </tr>
      <tr>
        <th>停机类型</th>
        <td>{{ infoObj.halttype }}</td>
        <th>故障名称</th>
        <td>{{ infoObj.name }}</td>
      </tr>
      <tr>
        <th>故障原因</th>
        <td colspan="3">{{ infoObj.cause }}</td>
      </tr>
      <tr>
        <th>处理方法</th>
        <td colspan="3">{{ infoObj.treatmentmeasure }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "know-info",
  props: {
    data: Object,
  },
  data() {
    return {
      infoObj: "",
    };
  },

  mounted() {
    this.infoObj = this.data;
  },

  watch: {
    data(value) {
      this.infoObj = value;
      console.log(value);
    },
  },
};
</script>


<style lang="less" scoped>
.know-info {
  .table-card {
    border-collapse: collapse;
    width: 100%;
    color: @white;

    tr {
      font-size: 12px;
      th {
        width: 120px;
        height: 60px;
        border: 0.093vh solid @darkgray;
        line-height: 27px;
        padding: 0 4px;
      }
      td {
        height: 60px;
        border: 0.093vh solid @darkgray;
        line-height: 27px;
        padding: 0 4px;
      }
    }
  }
}
</style>