在vue中使用html表格

<template>
<div class="table" style="overflow-y: auto; height:15em; width:100%"> //overflow-y控制y轴滚动<table border="0" width="100%" height="16em" cellpadding="4.8" align="center"><tr><th>排名</th><th>道路名称</th><th>拥堵指数</th><th>平均车速</th></tr><tr><td>1</td><td>学院路</td><td>90</td><td>20</td></tr><tr><td>2</td><td>学院路</td><td>90</td><td>20</td></tr><tr><td>3</td><td>学院路</td><td>90</td><td>20</td></tr><tr><td>4</td><td>学院路</td><td>90</td><td>20</td></tr><tr><td>5</td><td>学院路</td><td>90</td><td>20</td></tr><tr><td>6</td><td>学院路</td><td>90</td><td>20</td></tr><tr><td>7</td><td>学院路</td><td>90</td><td>20</td></tr></table>
</div>
</template>
<style>
.table {tr:nth-child(2n+3){background-color: rgb(22, 73, 150);} //不同行换色tr:nth-child(1){background-color: rgb(16, 112, 201);}table tr{text-align: center;} //文本居中table th{text-align: center;}table td{text-align: center;}
}
</style>

排名	道路名称	拥堵指数	平均车速
1	学院路	90	20
2	学院路	90	20
3	学院路	90	20
4	学院路	90	20
5	学院路	90	20
6	学院路	90	20
7	学院路	90	20

在vue中使用html表格相关推荐

vue中导出Excel表格
vue中导出Excel表格项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
Vue中对Table表格中的输入项进行校验
项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验. 这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验 ...
vue中的 vxe-table表格插件实现树形数据表
一个 PC 端表格组件,大数据表格 vue vxe-table表格 vue vxe-table表格 2022-01-20 11:51·前端开发可以自定义选择引入的模块,减少项目的体积: 多主题,多图 ...
vue中使用导出表格功能
1.下载依赖 npm install -S file-saver xlsxnpm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Blo ...
实习总结第七谈-----------vue中element-ui的表格行高怎么控制
依旧在我负责的当前项目中举例子: 我的表格要求是一页只显示10条数据,且纵向不能产生滚动条,这样就意味着不能设置表格的整体高度来控制,那样会会产生滚动条,要么在表格纵向产生滚动条,要么在屏幕纵向产生滚 ...
vue中printJS打印表格---json
使用html的方式打印表格总是不在A4纸的正中间出现的问题: (1)表格的行--显示不全 (2)数据过多分页---各自会被拆分在打印html的基础上进行改进,处理复杂采用type=json来进 ...
vue中导出excel表格(支持导出图片)
//安装插件 npm install js-table2excel //引入插件 import table2excel from 'js-table2excel' //tableData数据 tabl ...
Vue中实现表格隔行换色效果
一.原理在 Vue 中,进行表格行的循环输出时,一般使用 v-for 指令,每次循环都能得到该行的索引 index ,用每一行的索引除以2取余,余数等于1,可以使用一种颜色作为背景色,余数等于0,可 ...
vue中表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头.vue-split-ta ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...

在vue中使用html表格

在vue中使用html表格

在vue中使用html表格相关推荐

最新文章

热门文章