html 表格实现

javascript 复制代码
<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>
相关推荐
今晚吃什么呢?6 分钟前
前端面试题之CSS中的box属性
前端·css
我是大龄程序员9 分钟前
Babel工作理解
前端
《独白》19 分钟前
将图表和表格导出为PDF的功能
javascript·vue.js·ecmascript
CopyLower22 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ24 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
什码情况24 分钟前
微服务集成测试 -华为OD机试真题(A卷、JavaScript)
javascript·数据结构·算法·华为od·机试
你的人类朋友1 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵1 小时前
JavaScript 空对象检测
javascript
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js