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 相关文章推荐
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
javascript 数组操作详解
Jan 29 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
微信小程序实现图片上传功能
May 28 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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/03 新手入门
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
为原生js Array增加each方法
2012/04/07 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
小程序实现搜索框功能
2020/03/26 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python实现井字棋小游戏
2020/03/09 Python
python中if及if-else如何使用
2020/06/02 Python
python 生成器需注意的小问题
2020/09/29 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
会计工作总结范文2014
2014/12/23 职场文书
公司庆典欢迎词
2015/01/26 职场文书
鲁迅故里导游词
2015/02/05 职场文书
中班下学期个人总结
2015/02/12 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server