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

 更新时间:2020年10月26日 11:38:18   作者:胖子ღ牛逼  
这篇文章主要介绍了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
   }
   ]

大致如上。

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

相关文章

  • vue.js使用v-model实现父子组件间的双向通信示例

    vue.js使用v-model实现父子组件间的双向通信示例

    这篇文章主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下
    2020-02-02
  • 8个非常实用的Vue自定义指令

    8个非常实用的Vue自定义指令

    这篇文章主要介绍了8个非常实用的Vue自定义指令,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • Vue插槽具体用法及实例分析

    Vue插槽具体用法及实例分析

    本文主要介绍了Vue框架中插槽的使用方法和应用场景。通过具体实例分析,详细讲解了插槽的具体用法,帮助读者深入理解Vue中插槽的使用和实现方式
    2023-05-05
  • 在VUE3中禁止网页返回到上一页的方法

    在VUE3中禁止网页返回到上一页的方法

    这篇文章主要介绍了在VUE3中如何禁止网页返回到上一页,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 在antd Table中插入可编辑的单元格实例

    在antd Table中插入可编辑的单元格实例

    这篇文章主要介绍了在antd Table中插入可编辑的单元格实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue实现拖拽交换位置

    vue实现拖拽交换位置

    这篇文章主要为大家详细介绍了vue实现拖拽交换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue loadmore组件上拉加载更多功能示例代码

    vue loadmore组件上拉加载更多功能示例代码

    这篇文章主要介绍了vue loadmore组件上拉加载更多功能示例代码,需要的朋友可以参考下
    2017-07-07
  • vue如何获取自定义元素属性参数值的方法

    vue如何获取自定义元素属性参数值的方法

    这篇文章主要介绍了vue如何获取自定义元素属性参数值的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue2.0 实现导航守卫(路由守卫)

    vue2.0 实现导航守卫(路由守卫)

    vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。这篇文章主要介绍了vue2.0 实现导航守卫(路由守卫)的相关知识,需要的朋友可以参考下
    2018-05-05
  • Vue proxyTable配置多个接口地址,解决跨域的问题

    Vue proxyTable配置多个接口地址,解决跨域的问题

    这篇文章主要介绍了Vue proxyTable配置多个接口地址,解决跨域的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论