Vue开发时，写过多次的效果，就当做模板代码记录下来，留待后用，避免重复工作。
<template>
<div class="tableCom">
<div class="tableHead">
<div class="tableHeadItem" v-for="(item,index) in head" :key="index" :style="{flex:item.flex}">{{ item.title }}
</div>
</div>
<div class="tableBody">
<div class="tableBody2" v-for="(item,index) in list" :key="index">
<div class="tableBody2Item" :style="{flex:head[i].flex}" v-for="(v,i) in item" :key="i">{{ v.title }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "tableCom",
components: {},
props: {
id: {
type: String,
default() {
return '';
}
}
},
data() {
return {
list: [
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11：18'}],
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11：18'}],
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11：18'}],
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11：18'}],
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11：18'}],
],
head: [{
title: '车场',
flex: 1.2
}, {
title: '维修员',
flex: 1
}, {
title: '状态',
flex: 1
}, {
title: '时间',
flex: 1
},]
}
},
watch: {},
mounted() {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.tableCom {
width: calc(100% - 40px);
margin-left: 20px;
.tableHead {
width: 100%;
height: 36px;
background: rgba(#013367, 0.8);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.tableHeadItem {
font-size: 14px;
font-family: PingFang;
font-weight: 500;
color: #DCEBFC;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
text-indent: 5px;
flex: 1;
}
}
.tableBody {
.tableBody2 {
min-height: 36px;
padding-top: 5px;
padding-bottom: 5px;
background: rgba(#031F3D, 0.8);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.tableBody2Item {
font-size: 14px;
font-family: PingFang;
font-weight: 500;
color: #DCEBFC;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
padding-left: 5px;
flex: 1;
}
}
.tableBody2:nth-child(2n) {
background: rgba(1, 51, 103, 0.8);
}
}
.status {
color: rgba(13, 206, 242, 1);
}
}
</style>
table 第二种写法模板
/**
* @Author: 858834013@qq.com
* @Name: item
* @Date: 2022-07-26
* @Desc:
*/
<template>
<div class="item">
<titleHead title="预警信息"></titleHead>
<div class="itemBody">
<div class="tableCom">
<div class="tableHead">
<div class="tableHeadItem">
报警信息
</div>
<div class="tableHeadItem">
报警类型
</div>
<div class="tableHeadItem">
报警级别
</div>
<div class="tableHeadItem">
状态
</div>
</div>
<div class="tableBody scrollBar">
<div class="tableBody2" v-for="(item,index) in list" :key="index">
<div class="tableBody2Item">{{ item.title }}</div>
<div class="tableBody2Item">{{ item.type }}</div>
<div class="tableBody2Item">{{ item.lv }}</div>
<div class="tableBody2Item">
<span class="kai" v-if="item.status==0">开</span>
<span class="guan" v-if="item.status==1">关</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import titleHead from "@/components/home1/titleHead";
import echarts from './echarts'
import num from "@/components/num";
export default {
name: "item",
components: {titleHead, echarts, num},
props: {
id: {
type: String,
default() {
return '';
}
}
},
data() {
return {
status: '',
list: [{
title: '机电故障',
type: '自然灾害',
lv: 'A',
status: 1,
}, {
title: '机电故障',
type: '自然灾害',
lv: 'A',
status: 0,
}, {
title: '机电故障',
type: '自然灾害',
lv: 'A',
status: 0,
}, {
title: '机电故障',
type: '自然灾害',
lv: 'A',
status: 0,
}, {
title: '机电故障',
type: '自然灾害',
lv: 'A',
status: 0,
}, {
title: '机电故障',
type: '自然灾害',
lv: 'A',
status: 0,
}, {
title: '机电故障',
type: '自然灾害',
lv: 'A',
status: 0,
},]
}
},
watch: {},
mounted() {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.item {
width: 100%;
height: calc(16.66% - 10px);
margin-top: 10px;
background: url("../../../../assets/page/itembg2.png") no-repeat;
background-size: 100% 100%;
}
.itemBody {
width: calc(100% - 20px);
padding-left: 10px;
padding-right: 10px;
height: calc(100% - 35px);
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
}
.tableCom {
width: calc(100% - 0px);
height: calc(100% - 10px);
.tableHead {
width: 100%;
height: 30px;
background: #101f69;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.tableHeadItem {
font-size: 12px;
font-family: PingFang;
font-weight: 500;
color: #4D9AFF;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
text-indent: 5px;
flex: 1;
}
}
.tableBody {
width: 100%;
height: calc(100% - 30px);
overflow-y: scroll;
.tableBody2 {
min-height: 30px;
padding-top: 5px;
padding-bottom: 5px;
background: #0b1458;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.tableBody2Item {
font-size: 12px;
font-family: PingFang;
font-weight: 500;
color: #4D9AFF;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
padding-left: 5px;
flex: 1;
.kai{
font-size: 12px;
font-family: PingFang;
font-weight: 500;
color: #21EBA3;
}
.guan{
font-size: 12px;
font-family: PingFang;
font-weight: 500;
color: #F24916;
}
}
}
.tableBody2:nth-child(2n) {
background: #0f1f6a;
}
}
.status {
color: rgba(13, 206, 242, 1);
}
}
</style>
