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
投稿
猜你喜欢
- 1. 安装Pyechartspip install pyecharts2. 图表基础2.1 主题风格添加主题风格使用的是 InitOpts(
- 本文实例讲述了python使用Queue在多个子进程间交换数据的方法。分享给大家供大家参考。具体如下:这里将Queue作为中间通道进行数据传
- 在同事那整了个免安装版的Mysql,然后添加到window服务,但是中间出现很多问题,总结一下个人经验,希望其他人不要走弯路。1)在同事那或
- 在Python网络爬虫中,通常是通过TXT纯文本方式存储,其实也是可以存储在数据库中的;同时在WAMP(Windows、Apache、MyS
- 滚动图片可以说是做网站经常会遇到的,特别是做企业网站,最常用的像产品展示,图片展示等,滚动的好处是吸引眼球,让人一下就注意到。之前本站发了一
- 本文实例讲述了Python简单实现自动删除目录下空文件夹的方法。分享给大家供大家参考,具体如下:总是发现电脑用上一段时间,各种软件生成各种目
- 一.filter函数简介filter函数主要用来筛选数据,过滤掉不符合条件的元素,并返回一个迭代器对象,如果要转换为列表list或者元祖tu
- 一、引言这个五一假期自驾回老家乡下,家里没装宽带,用手机热点方式访问网络。这次回去感觉4G信号没有以前好,通过百度查找小说最新更新并打开小说
- 比较简单的一个页面,类似csdn论坛在ns下的左边列表 描述: 1. 数据名:tree.mdb 表名:tree 表结构:id(自编)&nbs
- 在一些面试或者力扣题中都要求用双向链表来实现,下面是基于python的双向链表实现。一、构建链表节点class Node: &n
- 今天学习CI框架过程中遇到个问题: A PHP Error was encountered Severity: Notice Message
- 1、按照javaweb项目的要求逐步建立搭建起机构,具体的类包有:model 、db、dao、test;具体的架构详见下图:2、根据搭建的项
- 1.概述pyecharts 是百度开源的,适用于数据可视化的工具,配置灵活,展示图表相对美观,顺滑。2.安装python3环境下的安装:pi
- 就像标题呈现的一样,SQL Server 2008中的MERGE语句能做很多事情,它的功能是根据源表对目标表执行插入、更新或删除操作。最典型
- 本文为大家分享了SQL Server使用row_number分页的实现方法,供大家参考,具体内容如下1、首先是select ROW_NUMB
- 本文实例分析了AJAX使用get与post模式的区别。分享给大家供大家参考。具体分析如下:如果是get 模式的请求,则将传递参数通过URL
- 关于python中的二维数组,主要有list和numpy.array两种。好吧,其实还有matrices,但它必须是2维的,而numpy a
- 1. 用qt designer编写主窗体,窗体类型是MainWindow,空白窗口上一个按钮。并转换成mainWindow.py# -*-
- 用6N±1法求素数任何一个自然数,总可以表示成为如下的形式之一:6N,6N+1,6N+2,6N+3,6N+4,6N+5 (N=0,1,2,…
- apiDoc的安装npm install apidoc -g点击官方文档生成api的终端命令:apidoc -i 代码所在路径-o 生成文件