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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
js+css实现导航效果实例
Feb 10 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP实现网上点歌(二)
2006/10/09 PHP
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
javaScript复制功能调用实现方案
2012/12/13 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
用python爬取租房网站信息的代码
2018/12/14 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
super()与this()的区别
2016/01/17 面试题
简历中个人自我评价范文
2013/12/26 职场文书
《石榴》教学反思
2014/03/02 职场文书
地质灾害防治方案
2014/05/14 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
公司活动总结范文
2014/07/01 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
2015年双拥工作总结
2015/04/08 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
合作意向书范本
2019/04/17 职场文书
AJAX学习笔记
2021/05/18 Javascript