工作89:vue竖直的显示表头的表格(vue版本)

今天遇到一个问题,实现这样一个竖直的显示表头的表格,如下图。默认显示两列。

vue实现代码如下:

tableComponent.vue:

<template> <table class="mailTable" :style="styleObject" v-if="s_showByRow"> <tr v-for="index in rowCount"> <td class="column">{{tableData[index*2-2].key}}</td> <td>{{tableData[index*2-2].value}}</td> <td class="column">{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key : ''}}</td> <td>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value : ''}}</td> </tr> </table> <table class="mailTable" :style="styleObject" v-else> <tr v-for="index in rowCount"> <td class="column">{{tableData[index-1].key}}</td> <td>{{tableData[index-1].value}}</td> <td class="column">{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].key : ''}}</td> <td>{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].value : ''}}</td> </tr> </table> </template> <script> export default { data() { return { styleObject: {}, s_showByRow: true, }; }, props: ['tableData', 'tableStyle', 'showByRow'], computed: { rowCount: function() { return Math.ceil(this.tableData.length/2); } }, created() { this.styleObject = this.tableStyle; if(this.showByRow !== undefined){ this.s_showByRow = this.showByRow; } }, } </script>

 补充css:

<style>   .mailTable, .mailTable tr, .mailTable tr td{ border:1px solid #E6EAEE; }   .mailTable{ font-size: 12px; color: #71787E; }   .mailTable tr td{ border:1px solid #E6EAEE; width: 150px; height: 35px; line-height: 35px; box-sizing: border-box; padding: 0 10px; }   .mailTable tr td.column { background-color: #EFF3F6; color: #393C3E; } </style>

引用时如下:

<mailTable :tableData="tableData" :tableStyle="{ width:'600px' }"></mailTable>

数据tableData格式如下:

tableData: [ {key: '单号', value: '1001'}, {key: '商品名称', value: '篮球'}, {key: '价格', value: '120.00'}, {key: '订单日期', value: '2017-03-01'}, {key: '付款方式', value: '在线支付'}, {key: '收货地址', value: '北京市海淀区西北旺镇'}, ],

效果图如下:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416297.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python之路】数据库2

一、数据库存储引擎 1.什么是存储引擎 mysql中建立的库>文件夹 库中建立的表>文件  现实生活中我们用来存储数据的文件应该有不同的类型&#xff1a;比如存文本用txt类型&#xff0c;存表格用excel&#xff0c;存图片用png等 数据库中的表也应该有不同的类型&#xff0c…

linux服务器配置端口,Linux服务器配置-新增端口

1、我们需要知道操作的Apache配置文件在Linux服务器上面的路径&#xff1a;/etc/apache2/&#xff0c;用cd命令即可&#xff1a;cd /etc/apache2/在服务器上&#xff0c;我们通过ls命令查看配置文件&#xff1a;2、需要用到的是设置端口的文件ports.conf 以及sites-enabled目录…

3224: Tyvj 1728 普通平衡树

3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 14480 Solved: 6275Description 您需要写一种数据结构&#xff08;可参考题目标题&#xff09;&#xff0c;来维护一些数&#xff0c;其中需要提供以下操作&#xff1a;1. 插入x数2. 删除x数(若有…

linux编译c++ 静态库,C/C++ 条件编译静态库

》windows 下方法&#xff1a;1.方法一&#xff1a;VS工程中中直接添加1.1在VS的属性-》常规-》附加库目录&#xff0c;添上文件夹的路径:例如&#xff1a;lib/x64&#xff1b;1.2输入的附加依赖项&#xff0c;添加上库的名字&#xff0c;例如&#xff1a;dmapi.lib1.3 对用到该…

[BZOJ 2654]tree(陈立杰)

Description 给你一个无向带权连通图&#xff0c;每条边是黑色或白色。让你求一棵最小权的恰好有need条白色边的生成树。题目保证有解。Input 第一行V,E,need分别表示点数&#xff0c;边数和需要的白色边数。接下来E行,每行s,t,c,col表示这边的端点(点从0开始标号)&#xff0c;…

DM3软件如何在linux中安装,DM3 文件扩展名: 它是什么以及如何打开它?

DM3 疑难解答频繁的 DM3 打开问题ImageJ 不存在你尝试加载 DM3 文件并收到错误&#xff0c;例如 “%%os%% 无法打开 DM3 文件扩展名”。 通常&#xff0c;%%os%% 中会出现这种情况&#xff0c;因为 ImageJ 未安装在你的电脑上。 你将无法双击以打开 DM3&#xff0c;因为你的操作…

CentOS6.8下安装memcached并设置开机自启动

参考资料&#xff1a;http://www.cnblogs.com/handongyu/p/6419305.html http://coolnull.com/1986.html 一、安装libevent 首先检查系统中是否安装了libevent [rootyeebian ~]# rpm -qa | grep libevent 如果安装了则查看libevent的安装路径&#xff0c;后续安装时需要用到 […

ftp 530 linux,Linux启动ftp服务器530 Permission denied解决方法

重新在虚拟机下安装了linux。现在我想启动linux自带的ftp服务器&#xff1a;#service vsftpd start 。如果想linux启动是自动启动ftp服务器&#xff1a;#chkconfig vsftpd on 。运行putty&#xff0c;以root身份进入&#xff0c;出现了报错 530 Permission denied &…

Shiro身份认证授权原理

shiro在应用程序中的使用是用Subject为入口的&#xff0c; 最终subject委托给真正的管理者ShiroSecurityMannager Realm是Shiro获得身份认证信息和来源信息的地方(所以这里是我们实现的)我们只要继承他的实现类重写方法就好了&#xff0c;AuthorizingRealm 身份认证过程 自定义…

linux进程路由策略,linux路由表,策略路由,路由查找

路由表内核中路由表有2种&#xff1a;l 一个是缓存路由(fib)&#xff0c;是自动学习生成自动管理的&#xff0c;用户没必要去干预&#xff0c;但是内核还是提供了方法让用户可以去清空它。但是用户不能设置它的项&#xff0c;但是可以根据这个缓存更新的原理从外部影响他。l 路…

图形桌面linux触摸,新手看招:用图形桌面访问Linux操作系统

创建用户帐户&#xff1a;adduser login-name (OS:Red Hat)useradd login-name (OS:SuSe)为帐户添加密码&#xff1a;passwd login-name (密码应该包括一个数字&#xff0c;且不能为英文单词)结束登录程序&#xff0c;启动另一登录实例&#xff1a;CtrlD从终端启动图形窗口环境…

Python namedtuple(命名元组)使用实例

Python namedtuple(命名元组)使用实例 #!/usr/bin/python3import collectionsMyTupleClass collections.namedtuple(MyTupleClass,[name, age, job]) obj MyTupleClass("Tomsom",12,Cooker) print(obj.name) print(obj.age) print(obj.job)执行结果&#xff1a; To…

pd怎么卸载linux系统,parallels desktop11怎么卸载?parallels desktop11卸载方法

parallels desktop11是一款功能强大的MAC虚拟机软件&#xff0c;用户通过该软件可在mac系统下运行安装windows或Linux操作系统&#xff0c;不过很多时候用户在安装后&#xff0c;由于后期没有使用虚拟机的需求&#xff0c;故此想要将其删除&#xff0c;但是又不知道如何操作&am…

html5中使页面中元素居中

在div中加入 style"text-align: center;

linux下jdk源码安装,Linux JDK 源码安装

一 环境1.1 操作系统[roothost-xxxsoft]# lsb_release -aLSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noarchDistributor ID: CentOSDescription: CentOS re…

Python map/reduce

2017-07-31 18:20:59 一、map函数 map()&#xff1a;会根据提供的函数对指定序列做映射。第一个参数 function 以参数序列中的每一个元素调用 function 函数&#xff0c;返回包含每次 function 函数返回值的iterator,即迭代器&#xff0c;使用list函数可以将之转成列表。 map(f…