vue 怎么实现不规则table

在 Vue.js 中实现不规则表格 (irregular table) 可能是指动态生成的表格，其中每个单元格的样式、内容或布局都不固定。通常，Vue 提供了数据驱动视图的特点，可以结合 v-for 循环和对象数组来动态渲染表格。

以下是一个基本的示例，展示如何使用 Vue 的模板和计算属性来创建一个不规则的表格：

<template>
  <div id="app">
    <table>
      <tbody>
        <tr v-for="(row, rowIndex) in irregularTableData" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="`${rowIndex}-${cellIndex}`">
            {{ getCellStyle(rowIndex, cellIndex) }}
            {{ cell }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      irregularTableData: [
        // 示例数据，可以根据需要自定义
        ['常规', '单元格', { content: '复杂内容' }],
        [{ style: 'background-color: yellow;' }, '不规则'],
        [null, { colspan: 2, content: '合并单元格' }]
      ],
    };
  },
  methods: {
    getCellStyle(rowIndex, cellIndex) {
      // 根据行索引和列索引返回不同的CSS样式或内容
      // 这里只是一个简单的例子，你可以根据实际需求编写复杂的逻辑
      if (rowIndex % 2 === 0) {
        return 'even-row-style';
      } else {
        return 'odd-row-style';
      }
    },
  },
};
</script>

<style scoped>
.even-row-style td {
  background-color: lightblue;
}
.odd-row-style td {
  background-color: lightgreen;
}

/* 添加你需要的其他CSS样式 */
</style>

在这个例子中，`irregularTableData` 是一个数组，每一项表示一行，每一项内部又是另一个数组或对象，表示该行中的单元格。`getCellStyle` 方法根据行索引和列索引动态地返回单元格的样式。通过修改 `getCellStyle` 函数，你可以实现各种不规则的表头样式、单元格合并、动态内容等效果。