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>