<template>
  <table class="w100 border textC m-fs24" cellspacing="0" cellpadding="0" border="0">
    <thead>
    <tr>
      <th class="pdT10 pdB10" v-for="item in thead">{{item}}</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="list in tbody">
      <td v-for="value in list">
        {{value}}
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>

  export default {
    name: 'ZghTable',
    props: {
      tbody: {
        default() {
          return [
            {name: 'name1', type: 'type', default: 'default'}
          ]
        }
      },
      thead: {
        default() {
          return ['字段名', '说明', '类型', '默认值']
        }
      },
    },
    data() {
      return {
        sideActive: false,
      }
    },
    computed: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import url("../../assets/config");

  tr {
    border-bottom: 1px solid #ccc;

  }
  tbody {
    tr {
      line-height: 40px;
      &:nth-child(odd) {
        background: #fafafa
      }
      &:hover {
        background: rgb(245, 247, 250);
      }
    }
  }
</style>
