在VueJS中，如何生成一个组件来渲染具有固定列数和自动分配单元格的表格？

Answer 1

正如我的评论中提到的，不要使用表格，因为您不再有表格数据。

根据需要对任意数量的列使用 CSS 网格和样式。您甚至可以使用 CSS 媒体查询根据设备宽度调整列，这对于网格来说比使用列要容易得多。

这是一个快速的功能演示

代码：

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
const items = [
 {id: 1, name: "Item 1", price: 10.99 },
 {id: 2, name: "Item 2", price: 20.50 },
 {id: 3, name: "Item 3", price: 15.75 },
 {id: 4, name: "Item 4", price: 15.75 }]
</script>

<template>

 <div>
     <ul id="items">
         <li v-for="(item, index) in items" :key="index">
          <span class="id">Id: {{ item.id }}</span>
          <h2 class="name">{{ item.name }}</h2>
          <span class="price">{{ item.price }}</span>
         </li>
     </ul>
   </div>

</template>
<style>
  #items{
    list-style: none; 
    padding: 0;
    /* Make a grid */
    display: grid;
    /*Make it 3 columns */
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
  }

  #items li {border: 1px solid black ;
  padding: 3px;
  }
  
  #items li .name{  
    text-align: center
  }

  #items li .price:before{  
    content: "$";
    display:inline-block;
}

</style>