तो मेरे पास यह सरल तालिका है:यहां छवि विवरण दर्ज करें

जिसके लिए कोड काफी सीधा है:

<template>
    <div class="table">
        <div class="table__headers">
            <h3 v-for="header in headers" :key="header.value">
                {{ header.value }}
            </h3>
        </div>
        <div class="table__body">
            <div
                v-for="(item, index) in modelData"
                :key="index"
                class="table__body--line"
            >
                <p v-for="{ property } in headers" :key="property">
                    <router-link
                        :to="{ name: 'AdminJob', params: { id: item.id } }"
                    >
                        {{ item[property] }}
                    </router-link>
                </p>
            </div>
        </div>
    </div>
    <Pagination
        v-model:current-page="meta.currentPage"
        :total="meta.total"
        v-model:per-page="meta.perPage"
    />
</template>


<style scoped lang="scss">
.table {
    border: solid 1px red;

    &__headers {
        display: grid;
        grid-gap: 10px;
        grid: 50px / auto-flow minmax(100px, 1fr);
    }

    &__body {
        display: flex;
        flex-direction: column;
        grid-gap: 10px;
        &--line {
            display: grid;
            grid-gap: 10px;
            grid: auto / auto-flow minmax(200px, 1fr);
        }
    }
}
</style>

मैं जो हासिल करने की कोशिश कर रहा हूं वह कॉलम की चौड़ाई को इसके अंदर की सामग्री के लिए लचीला बनाना है।

तो उपरोक्त आधार में, चूंकि विवरण में इतनी अधिक सामग्री है, तो स्थिति यह अधिक स्थान भर देगी। अन्य चेतावनी यह है कि यह Vue घटक सूचना के कई अलग-अलग तालिकाओं को दिखाता है। अन्य मामलों में, हमारे पास केवल 2 कॉलम हो सकते हैं और अन्य स्थितियों में हमारे पास 8 हो सकते हैं, इसलिए मैं प्रत्येक तालिका में जाने और चौड़ाई के साथ छेड़छाड़ किए बिना इसका 'वैश्विक' समाधान निकालने की कोशिश कर रहा हूं।

क्या ग्रिड में ऐसा करने का कोई आसान तरीका है? मैंने फ्लेक्सबॉक्स को एक कोशिश दी लेकिन मैं कॉलम को ग्रिड की तरह पूरी तरह से संरेखित नहीं कर सका।

0
Riza Khan 21 अगस्त 2021, 18:55

2 जवाब

सबसे बढ़िया उत्तर

कॉलम लचीलेपन के लिए आप css-variables का उपयोग कर सकते हैं और इसे Vue की स्टाइल बाइंडिंग के साथ बाँध सकते हैं।

<template>
  <div class="table" :style="{ '--cols': counts }">
    <div v-for="header in headers" :key="header">
      <h3 class="table__headers">{{ header }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      headers: [
        "apple",
        "ndis officia! Perferendis ratione blanditiis repellat explicabo neque",
        "lorem ipsum dolor sit amet",
        "mango"
      ],
    };
  },
  computed: {
    counts: function () { return this.headers.length < 4 ? `${l}` : "auto-fit" },
  },
};
</script>

<style scoped>
.table {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(100px, max-content));
  gap: 10px;
}
.table__headers { ... }
</style>
1
Bubai 22 अगस्त 2021, 12:42

आपको अपने कोड में grid-template-columns:min-content का उपयोग करना होगा। यह पेज आपकी मदद कर सकता है।

0
Elsa Karami 21 अगस्त 2021, 18:03