Vue+Element自定义纵向表格表头教程
作者:胖子ღ牛逼 发布时间:2023-07-02 17:10:38
标签:Vue,Element,纵向,表格,表头
如下所示:
代码如下:
<table style="width: 100%" class="myTable">
<tr v-for="(item,i) in statDatas" :key="i">
<td class="column">{{ item.key }}</td>
<td class="column">{{ item.value }}</td>
</tr>
</table>
绑定的是 statDatas 属性是一个 json数组,由key value组成的json,如果需要多列就直接增加属性就可以。
优美样式:
.myTable {
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
.myTable td,
.myTable th {
border: 1px solid #cad9ea;
color: #666;
height: 60px;
}
补充知识:vue element table表头垂直表格(新增封装一个垂直表格的组件)
对话框中弹出查看信息,打开时表格,要求是表头在左侧
<table class="tableInfo" :model="editForm" id="printTest">
<thead></thead>
<tbody>
<tr>
<td>日报类型</td>
<td>{{editForm.daily_type | filterType}}</td>
</tr>
<tr>
<td>开始时间</td>
<td>{{editForm.start_time | formatTimer('hours')}}</td>
</tr>
<tr>
<td>结束时间</td>
<td>{{editForm.end_time | formatTimer('hours') }}</td>
</tr>
<tr>
<td>今日内容</td>
<td>{{editForm.content}}</td>
</tr>
<tr>
<td>计划</td>
<td>{{editForm.plan}}</td>
</tr>
</tbody>
</table>
效果
------------------手动的华丽丽的的分割线------------------
最近封装了一个带插槽的垂直表头的table组件
效果如图
封装的部分全部代码
<template>
<div class="table_detail">
<div class="list" v-for="item in detailData" :key="item.value">
<div class="label">
<el-badge
:value="1"
class="item"
type="primary"
v-if="item.label === '扣分项' || item.label === '加分项'" //这里是动态传表头进去
/>
{{ item.label }}
</div>
<div class="text">
<template v-if="$scopedSlots[item.prop]">
<slot :name="item.prop" :files="item.text"></slot>
</template>
<template v-else>{{ item.text }}</template>
</div>
</div>
</div>
</template>
<script>
export default {
name: "table-detail",
props: {
detailData: {
type: Array,
default: () => []
}
},
data() {
return {
visible: false
}
}
}
</script>
<style lang="scss">
.table_detail {
width: auto;
height: auto;
margin: 0 10px 0 10px;
border: 1px solid #ebeef5;
border-bottom: none;
.list {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ebeef5;
// font-size: 16px;
.label {
width: 95px;
border-right: 1px solid #ebeef5;
padding: 10px 10px 10px 0;
text-align: right;
font-weight: 400;
}
.text {
flex: 1;
text-align: left;
padding: 10px 30px 10px 10px;
font-weight: 500;
word-wrap: break-word; //超出文本行自动换行
word-break: break-all; //超出文本行自动换行
overflow: hidden; //超出文本行自动换行
}
}
}
</style>
然后使用部分,先局内引入注册
然后使用
<table-detail :detailData="companyDetail">
// 这部分使我们自己要用的预览文件的部分,不用的话可以不用写
<template v-slot:file="{ files }">
<app-upload
:upload="new Upload(upload)"
is-download
is-preview
is-view
disabled
/>
<ul>
<li v-for="(file, i) in files" :key="i">
{{ file.url }}
<el-link
type="primary"
:href="file ? file.url : ''"
target="_blank"
>预览</el-link
>
<el-link type="primary" @click="download(file)">下载</el-link>
</li>
</ul>
</template>
</table-detail>
在data 里面定义 companyDetail: [],
然后在methods里面获取到数据之后赋值即可
this.companyDetail = [
{
label: `${this.labelTitle}项`,
text: res.indexTitle
},
{
label: `${this.labelTitle}值`,
text: res.score
},
{
label: `${this.labelTitle}时间`,
text: this.$formatDate(res.reportTime, "YYYY.MM.DD", "YYYYMMDD")
},
{
label: `${this.labelTitle}单位`,
text: res.orgName
},
{
label: `${this.labelTitle}原因`,
text: res.description
},
{
label: "申诉理由",
text: res.reason
},
{
label: "附件",
prop: "file",
text: files
}
]
大致如上。
来源:https://blog.csdn.net/z_xuewen/article/details/105054805
0
投稿
猜你喜欢
- 工欲善其事必先利其器,Python开发利器Pycharm常用快捷键以及配置如下,相信有了这些快捷键,你的开发会事半功倍一 常用快捷键编辑类:
- 本文实例讲述了python计算时间差的方法。分享给大家供大家参考。具体分析如下:1、问题:给定你两个日期,如何计算这两个日期之间间隔几天,几
- PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, .
- 开发工具Python版本:3.6.4相关模块:pygame模块;以及一些python自带的模块。环境搭建安装Python并添加到环境变量,p
- 我们从一个测试开始。下面这个函数的功能是什么? def foo(lst): a = 0 for i in
- 下面我摘录了SQL Server官方教程中的一段关于触发器的文字,确实有用的一点文字描述。 可以定义一个无论何时用INSERT语句向表中插入
- 在后台处理数据时,前台页面同时计数显示进度条Proess Bar使用了layer来显示用法:1。引用<script lang
- asp中我们可以利用ERR对象来判断sql语句执行是否成功:SQL="Insert INTO TABLE(F1,F2) value
- 网上关于SQL优化的教程很多,但是比较杂乱。近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充。(1) 选择
- 本文实例讲述了mysql优化小技巧之去除重复项实现方法。分享给大家供大家参考,具体如下:说到这个去重,脑仁不禁得一疼,尤其是出具量比较大的时
- 1. mysql的md5 mysql存在系统函数md5(“xxxxx”);2. mssql的md5&nb
- 函数的返回值返回结果要怎么做,多个结果又要怎么做# 函数返回值# 概念:函数执行完以后会返回一个对象,如果在函数内部有return 就可以返
- python可以使用xlrd读excel,使用xlwt写excel,但是如果要把数据写入已存在的excel,需要另外一个库xlutils配合
- lxml是Python中与XML及HTML相关功能中最丰富和最容易使用的库。lxml并不是Python自带的包,而是为libxml2和lib
- 本文实例讲述了Python Django框架实现应用添加logging日志。分享给大家供大家参考,具体如下:Django uses Pyth
- 如下所示:import dateutildef before_month_lastday(ti): today=dateutil
- 今天在工作中遇到了一个问题,需要按时间查询,可是查询出来的结果显示的不正确。举个例子来说,要查找出2007-10-12至2007-10-31
- IE8主页http://www.microsoft.com/windows/products/winfamily/ie/ie8/defaul
- 使用PHP GD,使用良好,一键剪裁各种尺寸,打包下载。经常换icon的懂的,美工给你一个1024的logo,你得ps出各种尺寸,于是有了这
- 昨天我突发奇想,想用display:inline来实现三列的布局可是搞了半天就是不行。但是理论上是可以的呀(后来才发现是不理解的不深刻,我的