Rumah  >  Soal Jawab  >  teks badan

Melaksanakan jadual HTML Vuetify bersempadan sepenuhnya: panduan langkah demi langkah

<p>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.</p> <p>给出以下示例(复制链接)</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Jika rentang baris sel terakhir lebih besar daripada 1, anda boleh melihat bahawa ia mempunyai jidar yang lebih tebal</p> <p>Adakah sesiapa tahu "peraturan" CSS yang tiada untuk menetapkan sempadan jadual dalam kes ini? </p>
P粉373596828P粉373596828436 hari yang lalu565

membalas semua(2)saya akan balas

  • P粉611456309

    P粉6114563092023-09-04 16:18:12

    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>

    balas
    0
  • P粉464082061

    P粉4640820612023-09-04 10:05:36

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

    table {
      border-collapse: collapse;
    }

    balas
    0
  • Batalbalas