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>
相关推荐
会飞的鱼先生几秒前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了1 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风6 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风7 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺27 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺28 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码28 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou29 分钟前
组件测试
前端
JustHappy32 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可1 小时前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin