Melaksanakan jadual HTML Vuetify bersempadan sepenuhnya: panduan langkah demi langkah

Question

Saya mempunyai apl Vue yang menggunakan jadual Vuetify, yang tidak menyokong jadual sempadan (tetapi lihat https://github.com/vuetifyjs/vuetify/issues/16336). Itulah sebabnya saya cuba menggunakan CSS saya sendiri untuk menambah sempadan yang hilang.

给出以下示例（复制链接）

<template>
  <v-app>
    <v-utama>
      <v-jadual>
        <kepala>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
          </tr>
        </kepala>
        <tbody>
          <tr v-for="(baris, rowIndex) dalam tableMatrix" :key="rowIndex">
            <template v-for="(sel, columnIndex) dalam baris" :key="columnIndex">
              <td v-if="sel.dilindungiOlehPreviousSel" kelas="d-tiada" />
              <td v-else :rowspan="sel.rowspan">
                <template v-if="cell.content">
                  {{ kandungan sel }}
                </template>
              </td>
            </template>
          </tr>
        </tbody>
      </v-table>
    </v-utama>
  </v-app>
</template>

<penyiapan skrip lang="ts">
import { ref, Ref } daripada 'vue';

antara muka Sel { isCoveredByPreviousCell: boolean; rowspan: nombor; kandungan?: string; }

taip TableMatrix = Sel[][];

const childCell: Cell = { isCoveredByPreviousCell: false, rowspan: 1, content: "cell with rowspan 1" };

const tableMatrix: Ref<TableMatrix> = ref([
  [{ isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" },{ ...childCell }],
  [{ isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" },{ ...childCell }],
  [{ ...childCell },{ ...childCell }],
  [{ ...childCell }, { isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" }],
  [{ ...childCell }, { isCoveredByPreviousCell: benar, rowspan: 1, kandungan: "dilindungi oleh ibu bapa" }],
  [{ isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" },{ ...childCell }],
  [{ isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" },{ ...childCell }],
])
</skrip>

<gaya>
jadual { sempadan: 1px pepejal #e6e6e6; }
  
jadual ke {bahagian atas sempadan: 1px pepejal #e6e6e6; }

jadual th + th { sempadan-kiri: 1px pepejal #e6e6e6; }

jadual td + td { sempadan-kiri: 1px pepejal #e6e6e6; }</style>

Jika rentang baris sel terakhir lebih besar daripada 1, anda boleh melihat bahawa ia mempunyai jidar yang lebih tebal

Adakah sesiapa tahu "peraturan" CSS yang tiada untuk menetapkan sempadan jadual dalam kes ini?

Answer 1

Gunakan slot=item dan kemudian gunakan gaya berdasarkan slot berskop.

Berikut adalah contoh:

Tunjukkan coretan kod

Gunakan slot=item.name.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
})



.my-border {
  border-left: 5px solid red;
}



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.2/dist/vuetify.min.css">

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.2/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    >
      <template slot="item.name" slot-scope="data">
        <div :class="data.item.calories % 2 === 0 ? 'my-border': ''">{{data.item.name}}</div>
      </template>
    </v-data-table>
  </v-app>
</div>

Answer 2

Hanya tambah atribut border-collapse:collapse; pada jadual.

table {
  border-collapse: collapse;
}