Maison  >  Questions et réponses  >  le corps du texte

Implémentation d'un tableau HTML Vuetify entièrement bordé : un guide étape par étape

<p>J'ai une application Vue qui utilise les tables Vuetify, qui ne prend pas en charge les tables de bordure (mais voir https://github.com/vuetifyjs/vuetify/issues/16336). C'est pourquoi j'ai essayé d'utiliser mon propre CSS pour ajouter la bordure manquante.</p> <p>给出以下示例(复制链接)</p> <pre class="brush:php;toolbar:false;"><template> <v-app> <v-main> <v-table> <tête> <tr> <th>Col 1</th> <th>Col 2</th> ≪/tr> ≪/tête> <corps> <tr v-for="(row, rowIndex) dans tableMatrix" :key="rowIndex"> <template v-for="(cellule, columnIndex) dans la ligne" :key="columnIndex"> <td v-if="cell.isCoveredByPreviousCell" class="d-none" /> <td v-else :rowspan="cell.rowspan"> <template v-if="cell.content"> {{ cellule.content }} </modèle> </td> </modèle> ≪/tr> </tcorps> </v-table> </v-main> </v-app> </modèle> <configuration du script lang="ts"> importer { ref, Ref } depuis 'vue' ; interface Cell { isCoveredByPreviousCell : booléen ; étendue de lignes : nombre ; contenu ? : chaîne ; } tapez TableMatrix = Cell[][]; const childCell : Cell = { isCoveredByPreviousCell : false, rowspan : 1, contenu : "cellule avec rowspan 1" } ; const tableMatrix : Réf<TableMatrix> = réf([ [{ isCoveredByPreviousCell : false, rowspan : 2, contenu : "cellule avec rowspan 2" },{ ...childCell }], [{ isCoveredByPreviousCell : true, rowspan : 1, contenu : "couvert par le parent" },{ ...childCell }], [{ ...childCell },{ ...childCell }], [{ ...childCell }, { isCoveredByPreviousCell : false, rowspan : 2, contenu : "cellule avec rowspan 2" }], [{ ...childCell }, { isCoveredByPreviousCell : true, rowspan : 1, contenu : "couvert par le parent" }], [{ isCoveredByPreviousCell : false, rowspan : 2, contenu : "cellule avec rowspan 2" },{ ...childCell }], [{ isCoveredByPreviousCell : true, rowspan : 1, contenu : "couvert par le parent" },{ ...childCell }], ]) </script> <style> tableau { bordure : 1px solide #e6e6e6 ; } table th { border-top : 1px solid #e6e6e6 ; } tableau th + th { border-left : 1px solid #e6e6e6 ; } table td + td { border-left : 1px solid #e6e6e6 ; }</style></pre> <p>Si l'étendue des lignes de la dernière cellule est supérieure à 1, vous pouvez voir qu'elle a une bordure plus épaisse</p> <p>Est-ce que quelqu'un sait quelle "règle" CSS manque pour corriger les bordures des tableaux dans ce cas ? </p>
P粉373596828P粉373596828432 Il y a quelques jours555

répondre à tous(2)je répondrai

  • P粉611456309

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

    Utilisez slot=item, puis appliquez le style en fonction de l'emplacement défini.

    Voici un exemple :

    Afficher l'extrait de code

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

    répondre
    0
  • P粉464082061

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

    Ajoutez simplement l'attribut border-collapse:collapse; au tableau.

    table {
      border-collapse: collapse;
    }

    répondre
    0
  • Annulerrépondre