Using vue and element-ui development, how to achieve an effect that looks like an irregular table

Method to realize:

method one:

1. In Vue components, use Element UI's table component <el-table>as the container for the entire table.
2. Create a data source (such as an array or array of objects) to store the table's content and structure.
3. According to the structure of the data source, the columns of the table are dynamically generated <el-table-column>, and the corresponding header and content are set.
4. Use v-forthe command to loop through the data source and generate the content of each row.
5. According to the structure of each row, dynamically set the corresponding column merge attributes :colspanand :rowspanto achieve the effect of irregular tables.

<template>
  <el-table :data="tableData" border>
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :colspan="column.colspan"
      :rowspan="column.rowspan"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, gender: 'Male', address: '123 Main St', company: 'ABC Corp', phone: '123-456-7890' },
        { address: '456 Elm St' },
        { company: 'XYZ Inc', phone: '987-654-3210' },
      ],
      columns: [
        { label: 'Name', prop: 'name', colspan: 1, rowspan: 1 },
        { label: 'Age', prop: 'age', colspan: 1, rowspan: 1 },
        { label: 'Gender', prop: 'gender', colspan: 1, rowspan: 1 },
        { label: 'Address', prop: 'address', colspan: 1, rowspan: 1 },
        { label: 'Company', prop: 'company', colspan: 1, rowspan: 1 },
        { label: 'Phone', prop: 'phone', colspan: 1, rowspan: 1 },
      ],
    };
  },
};
</script>

 Method Two:

<el-descriptions>Components and components can be used <el-descriptions-item>to achieve an effect similar to an irregular table. Each <el-descriptions-item>tag represents a row in the table, and :spanthe number of columns each item occupies is controlled by setting the property.

But it should be noted that <el-descriptions>components are used to display descriptive information, not tables in the traditional sense. It is more suitable for displaying some simple key-value pairs or descriptive text.

If the requirement is to display real tabular data and need more tabular functions, such as sorting, paging, editing, etc., then using <el-table>components is a better choice.

If the data structure is fixed, simple key-value pairs, or you just want to present descriptive information, then using <el-descriptions>components might be the way to go. But if your data structure is more complex, or you need more table functions, it is recommended to use <el-table>components for development.