You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.1 KiB
89 lines
2.1 KiB
6 months ago
|
<template>
|
||
|
|
<div class="table-view" id="tableView">
|
||
|
|
|
||
|
|
|
||
|
|
<table class="table-main" border="0" cellpadding = "10" align="left" >
|
||
|
|
<thead>
|
||
|
|
<tr height="25" valign="middle">
|
||
|
|
<td v-for="(value,key,index) in theadDatas" :key="index">{{value}}</td>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="item in tableDatas" :key="item.id">
|
||
|
|
<td v-for="(value,key,index) in item" :key="index">{{value}}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
// import { init } from './js/index.js'
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'baisicTable',
|
||
|
|
props: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
theadDatas:{num:"车牌号",color:"车牌颜色",positon:"违停地点",time:"违停时间"},
|
||
|
|
tableDatas:[
|
||
|
|
{num:"沪866B61",color:"#57D0EB",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
|
||
|
|
{num:"沪866B61",color:"#57D0EB",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"}
|
||
|
|
],
|
||
|
|
theadKeys:null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.theadKeys = Object.keys(this.theadDatas);
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// init();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.table-view{
|
||
|
|
// position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border: 1.5px solid #0E748A;
|
||
|
|
box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
|
||
|
|
.table-main{
|
||
|
|
// border = "1" width = "90%" cellspacing="0" cellpadding = "10"
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 10;
|
||
|
|
// border: 1.5px solid #0E748A;
|
||
|
|
thead{
|
||
|
|
text-align: left;
|
||
|
|
width: 90%;
|
||
|
|
background-color: #005062;
|
||
|
|
}
|
||
|
|
td{
|
||
|
|
// width:100%;
|
||
|
|
|
||
|
|
word-break:keep-all; /* 不换行 */
|
||
|
|
|
||
|
|
white-space:nowrap; /* 不换行 */
|
||
|
|
|
||
|
|
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
|
||
|
|
|
||
|
|
}
|
||
|
|
thead{
|
||
|
|
opacity: 0.65;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|