专栏首页acoolgiser_zhuanlanJavaScript 实现前端table页面,vue.js实现前端表格

JavaScript 实现前端table页面,vue.js实现前端表格

效果图:

代码:

<template>
   <table class="table table-striped table-bordered">
    <tr>
      <td class="column">工程部位</td>
      <td colspan="3" class="value">{{tableData.工程部位}}</td>
      <td class="column">测管编号</td>
      <td colspan="3" class="value">{{tableData.测管编号}}</td>
    </tr>
    <tr>
      <td class="column">桩号(m)</td>
      <td class="value">{{tableData.桩号}}</td>
      <td class="column">坝轴距(m)</td>
      <td class="value">{{tableData.坝轴距}}</td>
      <td class="column">埋设区域</td>
      <td colspan="3" class="value">{{tableData.埋设区域}}</td>
    </tr>
    <tr>
      <td rowspan="10" class="column">钻孔参数</td>
      <td class="column">钻孔直径(mm)</td>
      <td class="value">{{tableData.钻孔参数.钻孔直径}}</td>
      <td rowspan="10" class="column">测压管参数</td>
      <td class="value">测压管材质</td>
      <td colspan="3" class="value">{{tableData.测压管参数.测压管材质}}</td>
    </tr>
    <tr>
      <td class="column">钻孔深度(m)</td>
      <td class="value">{{tableData.钻孔参数.钻孔深度}}</td>
      <td class="column">管内径(mm)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.管内径}}</td>
    </tr>
    <tr>
      <td class="column">孔口高程(m)</td>
      <td class="value">{{tableData.钻孔参数.孔口高程}}</td>
      <td class="column">管外径(mm)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.管外径}}</td>
    </tr>
    <tr>
      <td class="column">孔底高程(m)</td>
      <td class="value">{{tableData.钻孔参数.孔底高程}}</td>
      <td class="column">管长度(m)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.管长度}}</td>
    </tr>
    <tr>
      <td class="column">钻入基岩或界层深度(m)</td>
      <td class="value">{{tableData.测压管参数.钻入基岩或界层深度}}</td>
      <td class="column">进水段长度(m)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.进水段长度}}</td>
    </tr>
    <tr>
      <td class="column">回填透水材料(m)</td>
      <td class="value">{{tableData.测压管参数.回填透水材料}}</td>
      <td class="column">埋设方法(m)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.埋设方法}}</td>
    </tr>
    <tr>
      <td class="column">透水材料底、顶高程(m)</td>
      <td class="value">{{tableData.测压管参数.透水材料底顶高程}}</td>
      <td class="column">管口高程(m)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.管口高程}}</td>
    </tr>
    <tr>
      <td class="column">回填封孔材料(m)</td>
      <td class="value">{{tableData.测压管参数.回填封孔材料}}</td>
      <td class="column">管底高程(m)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.管底高程}}</td>
    </tr>
    <tr>
      <td class="column">封孔材料底、顶高程(m)</td>
      <td class="value">{{tableData.测压管参数.封孔材料底顶高程}}</td>
      <td class="column">埋设前水位(m)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.埋设前水位}}</td>
    </tr>
    <tr>
      <td class="column"></td>
      <td class="value"></td>
      <td class="column">埋设后水位(m)</td>
      <td colspan="3" class="value">{{tableData.测压管参数.埋设后水位}}</td>
    </tr>
    <tr>
      <td class="column">上游水位(m)</td>
      <td class="value">{{tableData.上游水位}}</td>
      <td class="column">下游水位(m)</td>
      <td class="value">{{tableData.下游水位}}</td>
      <td class="column">天气</td>
      <td colspan="3" class="value">{{tableData.天气}}</td>
    </tr>
    <tr>
      <td class="column">埋设示意图及说明</td>
      <td colspan="6" class="value">{{tableData.埋设示意图及说明}}</td>
    </tr>
    <tr>
      <td class="column">埋设时段</td>
      <td colspan="6" class="value">{{tableData.埋设时段}}</td>
    </tr>
    <tr>
      <td rowspan="2" class="column">有关责任人</td>
      <td class="column">主管</td>
      <td class="value">{{tableData.主管}}</td>
      <td class="column">埋设者</td>
      <td class="value">{{tableData.埋设者}}</td>
      <td class="column">填表者</td>
      <td class="value">{{tableData.填表者}}</td>
    </tr>
    <tr>
      <td class="column">校核者</td>
      <td class="value">{{tableData.校核者}}</td>
      <td class="column">监测者</td>
      <td class="value">{{tableData.监测者}}</td>
      <td class="column">填表日期</td>
      <td class="value">{{tableData.填表日期}}</td>
    </tr>
  </table>
  
</template>

<script>
export default {
  data() {
    return {
      tableData:{
        工程部位:'...',
        测管编号:'',
        桩号:'',
        坝轴距:'...',
        埋设区域:'',
        钻孔参数:{
          钻孔直径:'6',
          钻孔深度:'',
          孔口高程:'',
          孔底高程:'',
          钻入基岩或界层深度:'',
          回填透水材料:'',
          透水材料底顶高程:'~',
          回填封孔材料:'',
          封孔材料底顶高程:'~'
        },
        测压管参数:{
          测压管材质:'钢材',
          管内径:'',
          管外径:'',
          管长度:'',
          进水段长度:'',
          埋设方法:'',
          管口高程:'',
          管底高程:'',
          埋设前水位:'',
          埋设后水位:''
        },
        上游水位:'...',
        下游水位:'...',
        天气:'...',
        埋设示意图及说明:'...',
        埋设时段:'...',
        有关责任人:{
          主管:'',
          埋设者:'',
          填表者:'',
          校核者:'',
          监测者:'',
          填表日期:'2018-10-10'
        }
      }

    };
  },
  props: [''],
  watch:{

  },
  computed: {
    
  },
  created() {
    
  },
}
</script>

<style scoped>
.table{
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
  display: table;
  width: 100%;
  max-width: 100%;
  margin-bottom: 22px;
}
.table td{
  text-align:center;
  vertical-align:middle;
  font-size: 9px;
}
.table-bordered {
    border: 1px solid #ddd;
}
*{
  margin: 0px;
  padding: 0px;
}
.column{
  width:100px;
  height:30px;
  border:1px solid #333;
}
.value{
  width:150px;
  height:30px;
  border:1px solid #333;
}


</style>

总结:

对于table中的th,tr,td 可以设置rowspan,colspan属性,使得具有任何复杂包含、重叠、组合关系的表格都能做出来。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript中匿名函数的递归(使用arguments和callee属性实现)

    函数的内部调用函数本身的话,可以直接写函数的名字来实现,但是如果是匿名函数的话,这样的做法就行不通了。 解决的办法是有的,使用arguments和callee...

    acoolgiser
  • C# 遍历读取某个目录文件夹下的不同类型子文件和其子文件夹(里面可能又有许多文件)

    string[] fileEntries = Directory.GetFiles(targetDirectory);

    acoolgiser
  • VC中CTreeContrl实现响应单击或双击事件

    acoolgiser
  • Jquery如何删除table里面checkbox选中的多个行与多个列

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • JS-结合html综合练习js的对象——班级成绩表制作

    xing.org1^
  • .Net Core 导出Html到PDF

      最近由于项目的需求问题,涉及到了在.Net Core中导出PDF的一个问题,最后选择方式是后端拼接到Html页面然后再通过Html导出到PDF。中间也尝试了...

    小世界的野孩子
  • 《HTML5实战》Lesson03

    Week03     2016/09/28上午1-4节 一、复习上节课内容: 二、自己完成登陆明细部分P43:代码清单2-3 1,<fieldset>、<leg...

    用户1733354
  • JQ实现计算器功能

    下面是计算器的实现方法,主要是使用了JQ,设计原型依据小米手机计算器,实现了基础的单步骤运算,做了简单的校验判断,实现了加减乘除取余等功能;

    申霖
  • Python自定义HtmlTestRunner测试报告

    简述 使用selenium webdriver + Python做自动化测试,执行完成后要生成测试报告,Python我们使用的HTMLtest...

    苦叶子
  • JQ实现表格全选、反选功能

    下面代码是使用JQ,实现表格列表的全选和反选功能,实际较为简单,主要做为教学使用:

    申霖

扫码关注云+社区

领取腾讯云代金券