html 表格实现-CSDN博客

本文链接：https://blog.csdn.net/qq_41588991/article/details/136378129

本文介绍了一个使用Vue编写的HTML模板，展示了如何创建一个包含名称、数量和总价等指标的动态表格，数据列表中每个条目都有固定值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="nox">
    <table class="hot-table" height='244'>
      <tr>
        <th v-for="(item, index) in headers" :key="index">{{item.label}}</th>
      </tr>
      <tr v-for="(item, index) in evaluationData.list" :key="index">
        <td>{{item.name}}</td>
        <td>{{item.value1}}</td>
        <td>{{item.value2}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      headers: [
        { label: '名称', prop: 'key' },
        { label: '数量', prop: 'highRiskNum' },
        { label: '总价', prop: 'highRiskProportion', unit: '%' }
      ],
      evaluationData: {
        list: [
          { name: '9999', value1: '111', value2: '222' },
          { name: '9999', value1: '111', value2: '222' },
          { name: '9999', value1: '111', value2: '222' },
          { name: '9999', value1: '111', value2: '222' },
          { name: '9999', value1: '111', value2: '222' },
          { name: '9999', value1: '111', value2: '222' }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nox {
  background: #fff;
}
.hot-table {
  width: 300px;
  th {
    height: 20px;
    font-size: 12px;
    font-weight: normal;
    background: #edf0f5;
    padding-left: 20px;
    color: #404e73;
  }
  td {
    height: 20px;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #f2f3f6;
  }
}
</style>