用vue写一个3行6列的表格

我可以给您一个简单的示例：<template>
<div>
<table>
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
<th>第4列</th>
<th>第5列</th>
<th>第6列</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</div>
</template>

相关问题

用vue3写一个表格

好的，下面是一个简单的 Vue3 表格组件示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(column, index) in columns" :key="index">{{ column }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    columns: {
      type: Array,
      required: true,
    },
    rows: {
      type: Array,
      required: true,
    },
  },
});
</script>

在这个组件中，我们定义了两个 props，`columns` 和 `rows`，分别表示表格的列和行。在模板中，我们使用了`v-for`指令来遍历列和行，并将它们渲染为表格的头部和主体。

这只是一个简单的示例，你可以根据你的需求对它进行扩展和修改。

vue绘制一个表格，列数不定，一共六行

可以使用Vue.js的v-for指令来动态渲染表格的行和列。以下是一个示例代码，可以绘制一个列数不定，一共六行的表格：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(item, index) in tableData[0]" :key="index">{{ index }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { col1: 'A1', col2: 'B1', col3: 'C1', col4: 'D1' },
        { col1: 'A2', col2: 'B2', col3: 'C2', col4: 'D2', col5: 'E2' },
        { col1: 'A3', col2: 'B3', col3: 'C3', col4: 'D3', col5: 'E3', col6: 'F3' },
        { col1: 'A4', col2: 'B4', col3: 'C4', col4: 'D4', col5: 'E4' },
        { col1: 'A5', col2: 'B5', col3: 'C5', col4: 'D5', col5: 'E5', col6: 'F5', col7: 'G5' },
        { col1: 'A6', col2: 'B6', col3: 'C6', col4: 'D6', col5: 'E6' },
      ]
    };
  }
};
</script>

在这个示例代码中，我们使用了v-for指令来动态渲染表格的列和行。在<thead>中，我们使用v-for来循环渲染表格的表头。在<tbody>中，我们使用两个v-for指令来循环渲染表格的行和列，其中外部v-for用于循环渲染每一行，内部v-for用于循环渲染每一列。注意，我们使用了:key属性来指定每个渲染的元素的唯一标识，以提高性能。