Vue+Element自定义纵向表格表头教程


Posted in Javascript onOctober 26, 2020

如下所示:

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>

效果

Vue+Element自定义纵向表格表头教程

------------------手动的华丽丽的的分割线------------------

最近封装了一个带插槽的垂直表头的table组件

效果如图

Vue+Element自定义纵向表格表头教程

封装的部分全部代码

<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
   }
   ]

大致如上。

以上这篇Vue+Element自定义纵向表格表头教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 #Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 #Javascript
jQuery实现简单评论区功能
Oct 26 #jQuery
vue.js封装switch开关组件的操作
Oct 26 #Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 #Javascript
vue render函数动态加载img的src路径操作
Oct 26 #Javascript
vue实现简单的登录弹出框
Oct 26 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
常用的php ADODB使用方法集锦
2008/03/25 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
新浪的图片新闻效果
2007/01/13 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
JS表的模拟方法
2015/02/05 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
建筑施工实习自我鉴定
2013/09/19 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
单位委托函范文
2015/01/29 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Redis分布式锁的7种实现
2022/04/01 Redis