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+Element自定义纵向表格表头教程 的全部内容, 来源链接: utcz.com/p/238278.html

回到顶部