<script>
export default {
  name: "AppTable",
  label: "原生表格",
  data() {
    return {
      tableData: [],
      columns: [
        {label: "", prop: ""}
      ]
    }
  },
  methods: {
    getCellStyle(config) {

    }
  }
}
</script>

<template>
  <section class="AppTable">
    <table cellspacing="0">
      <thead>
      <tr>
        <th v-for="(cell,i) in columns" v-bind="cell.config" :key="i">
          <div v-html="cell.label"/>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(row,i) in tableData" :key="i">
        <td :style="getCellStyle(cell.config)" v-for="(cell,j) in row" v-bind="cell.config" :key="j">
          <slot v-if="cell.slot&&$slots[cell.slot]" :name="cell.slot"/>
          <div v-else style="font-size: 16px;" v-html="cell.label"/>
        </td>
      </tr>
      </tbody>
    </table>
  </section>
</template>

<style scoped>
.AppTable table {
  width: 100%;
  border-collapse: collapse;
}

.AppTable table tbody tr:nth-of-type(2n) {
  --odd-bg: rgba(13, 48, 99, 0.3);
  background-image: linear-gradient(
      -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
      var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
  background-size: 20px 20px;
}


.AppTable table td {
  padding: 8px 16px;
  border: 1px solid black;
  box-sizing: border-box
}
</style>
