如何使用iview的table表格制作两行复合columns的表格

IView Table组件是一个功能强大的表格插件，它允许你在表格中创建复杂的列结构，包括多行和复合列。要在IView中制作两行复合列的表格，你可以按照以下步骤操作：

1. 首先，确保已安装Vue和IView库，并引入相应的CSS和JS文件。

<template>
  <div id="app">
    <ivu-table :data="tableData" :columns="columns"></ivu-table>
  </div>
</template>

<script>
import { Table } from 'iview';
export default {
  components: {
    Table
  },
  data() {
    return {
      tableData: [
        // 表格数据示例
        {
          name: '张三',
          info: {
            address: '北京市',
            phone: '13800138000'
          }
        },
        // 其他数据...
      ],
      columns: [
        // 复合列配置
        {
          type: 'expand', // 设置列类型为展开
          title: '详细信息',
          width: 200,
          render(h, params) {
            // 使用渲染函数返回两行内容
            return h(
              'div',
              { class: 'detail-content' },
              [
                `<p>地址：${params.row.info.address}</p>`,
                `<p>电话：${params.row.info.phone}</p>`
              ]
            );
          }
        },
        // 其他列配置...
      ]
    };
  }
};
</script>

<style scoped>
.detail-content {
  /* 样式自定义 */
}
</style>

在这个例子中，我们设置了`type: 'expand'`来开启列的展开模式，然后在`render`函数里定义了两行显示的内容。当你点击表头时，对应的行会展开并显示详细信息。