elementUI 动态生成几行几列的方法示例

ElementUI 是一套基于 Vue.js 的组件库，它提供了很多常用的 UI 组件。如果要动态生成 ElementUI 的表格，可以使用 ElementUI 的 `el-table` 组件。以下是一个示例代码，可以动态生成一个具有 `n` 行 `m` 列的表格：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        v-for="item in tableHeader"
        :key="item.label"
        :label="item.label"
        :prop="item.prop"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeader: [],  // 表头
      tableData: []     // 表格数据
    };
  },
  mounted() {
    const n = 3;  // 表格行数
    const m = 4;  // 表格列数

    // 动态生成表头
    for (let i = 0; i < m; i++) {
      this.tableHeader.push({
        label: `列${i + 1}`,
        prop: `col${i + 1}`
      });
    }

    // 动态生成表格数据
    for (let i = 0; i < n; i++) {
      let row = {};
      for (let j = 0; j < m; j++) {
        row[`col${j + 1}`] = `行${i + 1}列${j + 1}`;
      }
      this.tableData.push(row);
    }
  }
};
</script>

在这个示例中，我们通过 `tableHeader` 数组动态生成表头，通过 `tableData` 数组动态生成表格数据。在 `mounted` 钩子中，我们指定了表格的行数 `n` 和列数 `m`，然后使用 `for` 循环动态生成表头和表格数据。其中，表头的 `label` 属性和表格数据的属性名使用了类似 `col1`、`col2` 这样的命名方式，这是因为 ElementUI 的 `el-table-column` 组件的 `prop` 属性需要和表格数据的属性名对应。

以上示例可以在 Vue.js 和 ElementUI 的基础上实现动态生成表格的功能。你可以根据实际需求修改行数和列数，以及表头和表格数据的内容。