<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>