buildadmin 展开行使用

展开行是一种在表格中显示更多细节信息的方法。通常情况下，表格的每一行只显示少量信息，如果需要查看更多信息，则需要进入详细页面。但是，通过使用展开行，用户可以在表格中查看更多信息，而无需离开当前页面。

以下是使用buildadmin库实现展开行的步骤：

1. 安装buildadmin库

在命令行中使用以下命令进行安装：

npm install buildadmin

2. 导入buildadmin库

在需要使用展开行的页面中导入buildadmin库：

import buildadmin from 'buildadmin';

3. 创建表格

使用buildadmin库的table方法创建表格：

const table = buildadmin.table({
    container: '#table-container',
    columns: [
        {
            title: '姓名',
            field: 'name'
        },
        {
            title: '年龄',
            field: 'age'
        },
        {
            title: '性别',
            field: 'gender'
        }
    ],
    data: [
        {
            name: '张三',
            age: 20,
            gender: '男'
        },
        {
            name: '李四',
            age: 25,
            gender: '女'
        }
    ]
});

4. 添加展开行

使用buildadmin库的expandRow方法添加展开行：

table.expandRow({
    template: (rowData) => {
        return `
            <div>
                <p>电话：${rowData.phone}</p>
                <p>地址：${rowData.address}</p>
            </div>
        `;
    }
});

在这个例子中，展开行的内容是电话和地址，这些信息在数据中并没有显示。通过展开行，用户可以在表格中查看更多信息。

5. 完整代码示例

import buildadmin from 'buildadmin';

const table = buildadmin.table({
    container: '#table-container',
    columns: [
        {
            title: '姓名',
            field: 'name'
        },
        {
            title: '年龄',
            field: 'age'
        },
        {
            title: '性别',
            field: 'gender'
        }
    ],
    data: [
        {
            name: '张三',
            age: 20,
            gender: '男',
            phone: '123456789',
            address: '北京市'
        },
        {
            name: '李四',
            age: 25,
            gender: '女',
            phone: '987654321',
            address: '上海市'
        }
    ]
});

table.expandRow({
    template: (rowData) => {
        return `
            <div>
                <p>电话：${rowData.phone}</p>
                <p>地址：${rowData.address}</p>
            </div>
        `;
    }
});

在这个示例中，表格中的每一行都包含姓名、年龄和性别这三个字段，但是通过展开行，用户还可以查看电话和地址这两个字段的信息。