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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
详解Vue数据驱动原理
Nov 17 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
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
使javascript也能包含文件
2006/10/26 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
jQuery实现穿梭框效果
2021/01/19 jQuery
使用python实现rsa算法代码
2016/02/17 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
小学教师节活动方案
2014/01/31 职场文书
效能监察建议书
2014/05/19 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
Linux安装Docker详细教程
2022/07/07 Servers