TBA_GXPT/ruoyi-ui/src/views/standardization/bizDataShowConfig/show/GwTableTwo.vue

<template>
  <div class="descriptions-container">
    <el-descriptions :column="columnNumber" border>
      <el-descriptions-item v-for="(item, index) in data" :key="index" :label="item.name">
        {{ item.value ? item.value : '-' }}
      </el-descriptions-item>
    </el-descriptions>
    
  </div>
  <!--  <table class="gw-descriptions-table">-->
  <!--    <tbody>-->
  <!--    <tr v-for="num in rowNumber" :key="num">-->
  <!--      <template v-for="item in row(num)">-->
  <!--        <th colspan="1">{{ item.name }}</th>-->
  <!--        <td v-if="isString(item.value) && item.code !== 'name'" colspan="1">{{ item.value }}</td>-->
  <!--        <td v-else-if="isString(item.value) && item.code === 'name'" colspan="1">-->
  <!--          <span class="node-info">-->
  <!--            {{ item.value }}-->
  <!--          </span>-->
  <!--        </td>-->
  <!--        <td v-else-if="isArray(item.value)" colspan="1">-->
  <!--          <span v-for="(vl,index) in item.value" :key="index" class="node-info">-->
  <!--            {{ vl.name }}-->
  <!--          </span>-->
  <!--        </td>-->
  <!--        <td v-else colspan="1">-->
  <!--          <span class="empty-value">-</span> &lt;!&ndash; 显示占位符 &ndash;&gt;-->
  <!--        </td>-->
  <!--      </template>-->
  <!--    </tr>-->
  <!--    </tbody>-->
  <!--  </table>-->
    
</template>
<script setup>
import {
  getForecastlist
} from "@/api/standardization/bizDataShowConfig.js";
import {useRoute} from "vue-router";
const data = ref()
const route = useRoute();
function getYu(){
  getForecastlist({appId: route.params.id}).then(res=>{
    data.value = res.rows
  })
}
onMounted(() => {
  getYu();
});
// const props = defineProps({
//   data: {
//     type: Array,
//     default: [],
//   },
//   columnNumber: {
//     type: Number,
//     default: 3,
//   },
// })

// const row = computed(() => {
//   return (num) => {
//     let start = (num - 1) * props.columnNumber;
//     let end = num * props.columnNumber;
//     // if (end >= props.data.length && props.data.length > 1) {
//     //   end = -1;
//     // }
//     return props.data.slice(start, end);
//   }
// })

// const rowNumber = computed(() => {
//   if (props.data) {
//     return Math.ceil(props.data.length / props.columnNumber);
//   }
//   return 0;
// })
</script>
<style lang="scss" scoped>
.descriptions-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.gw-descriptions-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;

  tr:hover {
    background-color: #f5f7fa;

    td {
      background-color: inherit;
    }
  }

  th, td {
    border: 1px solid #ebeef5;
    padding: 12px 10px;
    //word-wrap: break-word;
  }

  th {
    min-width: 80px;
    text-align: center;
    background-color: #f5f7fa; // 表头背景色
    font-weight: bold;
  }

  td {
    text-align: left;

    .node-info {
      color: rgb(5, 164, 182);
      padding: 5px 10px;
      border: 1px solid rgb(44, 184, 197);
      border-radius: 5px;
      background-color: rgb(229, 247, 248);
      margin-right: 10px;
      margin-bottom: 5px;
      cursor: pointer;
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:hover {
        color: #fff;
        background-color: rgb(5, 164, 182);
        border: 1px solid rgb(5, 164, 182);
      }
    }

  }

  .empty-value {
    color: #909399;
    font-style: italic;
  }

}
</style>