🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## addComplexTable('name值', '标题', '表格数据'[, '是否有表头']) 标识符:`complexTable` 在表单中显示普通表格,用于展示数据,不可编辑。 ``` $table_data = [ ['姓名', '性别', '年龄'], ['张三', '男', '45'], ['李四', '男', '40'], ]; return ZBuilder::make('form') ->setPageTitle('新增') // 设置页面标题 ->addFormItems([ // 批量添加表单项 ['complexTable', 'list_user', '客户列表', $table_data] ]) ->fetch(); ``` 效果: ![](https://img.kancloud.cn/d3/47/d34706c8b2a5633f6e393315fb9e74df_1027x188.png) ### 设置第一行为表头 ``` $table_data = [ ['姓名', '性别', '年龄'], ['张三', '男', '45'], ['李四', '男', '40'], ]; return ZBuilder::make('form') ->setPageTitle('新增') // 设置页面标题 ->addFormItems([ // 批量添加表单项 ['complexTable', 'list_user', '客户列表', $table_data, true] ]) ->fetch(); ``` 效果: ![](https://img.kancloud.cn/1d/ae/1daedc217e5f0b0a15b7893cbb881b18_1017x182.png) ### 单独设置表头 ``` $table_head = [ ['姓名', '性别', '年龄'] ]; $table_data = [ ['张三', '男', '45'], ['李四', '男', '40'], ]; return ZBuilder::make('form') ->setPageTitle('新增') // 设置页面标题 ->addFormItems([ // 批量添加表单项 ['complexTable', 'list_user', '客户列表', $table_data, $table_head] ]) ->fetch(); ``` 效果: ![](https://img.kancloud.cn/07/04/0704d169ddf63ecef74ab42967e00a28_1016x184.png) ### 单元格合并 在需要合并的单元格,设置横向和纵向合并数量,格式:单元格值[横向数:纵向数] ``` $table_data = [ ['姓名[2]', '年龄'], // 姓名横向合并2个单元格,纵向默认1个 ['张三', '男', '45'], ['李四', '男', '40'], ]; return ZBuilder::make('form') ->setPageTitle('新增') // 设置页面标题 ->addFormItems([ // 批量添加表单项 ['complexTable', 'list_user', '客户列表', $table_data, true] ]) ->fetch(); ``` 效果: ![](https://img.kancloud.cn/16/2f/162f9c07ad1850a902db75e8189013e7_1020x187.png) 单独设置的表头也支持单元格合并 ``` $table_head = [ ['姓名[2]', '年龄'], // 姓名横向合并2个单元格,纵向默认1个 ]; $table_data = [ ['张三', '男', '45'], ['李四', '男', '40'], ]; return ZBuilder::make('form') ->setPageTitle('新增') // 设置页面标题 ->addFormItems([ // 批量添加表单项 ['complexTable', 'list_user', '客户列表', $table_data, $table_head] ]) ->fetch(); ``` 纵向合并 ``` $table_head = [ ['姓名[2]', '年龄'], // 姓名横向合并2个单元格,纵向默认1个 ]; $table_data = [ ['张三', '男[1:2]', '45'], ['李四', '40'], ]; return ZBuilder::make('form') ->setPageTitle('新增') // 设置页面标题 ->addFormItems([ // 批量添加表单项 ['complexTable', 'list_user', '客户列表', $table_data, $table_head] ]) ->fetch(); ``` 效果: ![](https://img.kancloud.cn/c2/40/c240773258aed5ef5ba27eb1568da2b5_1024x188.png) 比较复杂的表格 ``` $table_data = [ ['姓名[:2]', '张三[:2]', '性别', '男', '专业技术职务', '测试', '第一学历', '测试'], ['出生年月', '2019-01-01', '行政职务', '测试', '最后学历', '测试'], ['第一学历和最后学历<br>业时间、学校、专业[2]', '测试[6]'], ['主要从事工作与<br>研究方向[2]', '测试[6]'], ['行业企业兼职[2]', '测试[6]'], ['工作简历[2]', '测试[6]'], ['最具代表性的<br>教学科研成果[2]', '测试[6]'], ['目前承担的主要<br>教学工作(5项以内)[2]', '测试[6]'], ]; return ZBuilder::make('form') ->setPageTitle('新增') // 设置页面标题 ->addFormItems([ // 批量添加表单项 ['complexTable', 'list_user', '客户列表', $table_data, true] ]) ->fetch(); ``` ![](https://img.kancloud.cn/3a/c3/3ac30dbe4d0032bb192a6ecd8790f3e9_1021x481.png) >[danger] 注意,在设置单元格合并参数的时候,一定要弄清楚各个单元格占用的格数。 正常的表格是这样的 ``` $table_data = [ ['张三', '男', '45'], ['李四', '男', '40'], ]; ``` 如果想把性别“男”合并起来,那么在设置第一行张三的“男[1:2]”后,后一行的"男"就需要去掉,如: ``` $table_data = [ ['张三', '男[1:2]', '45'], ['李四', '40'], ]; ``` 否则会合并不正确。 另外,下面两种设置方式是一样的: ``` $table_data = [ ['张三', '男[1:2]', '45'], ]; $table_data = [ ['张三', '男[:2]', '45'], ]; ``` 也就是说,如果是数字1,可以不写,下面两种也是一样的: ``` $table_data = [ ['张三', '男[2]', '45'], ]; $table_data = [ ['张三', '男[2:1]', '45'], ]; ``` 其他复杂的单元格合并方式要靠自己去摸索了。 ### 单元格内显示表格 ``` $table_inside = [ ['序号', '成果名称', '等级及签发单位、时间', '本人署名位次'], ['1', 'a1', '2019-01-01', '1'], ['2', 'a2', '2019-01-01', '2'], ['3', 'a2', '2019-01-01', '3'], '6:1' // 最后一个为字符串,用来设置所在单元格的合并,如果不需要合并则无需填写。 ]; $table_data = [ ['姓名[:2]', '张三[:2]', '性别', '男', '专业技术职务', '测试', '第一学历', '测试'], ['出生年月', '2019-01-01', '行政职务', '测试', '最后学历', '测试'], ['第一学历和最后学历<br>业时间、学校、专业[2]', '测试[6]'], ['主要从事工作与<br>研究方向[2]', '测试[6]'], ['行业企业兼职[2]', '测试[6]'], ['工作简历[2]', '测试[6]'], ['最具代表性的<br>教学科研成果[2]', $table_inside], ['目前承担的主要<br>教学工作(5项以内)[2]', '测试[6]'], ]; return ZBuilder::make('form') ->setPageTitle('新增') // 设置页面标题 ->addFormItems([ // 批量添加表单项 ['complexTable', 'list_user', '客户列表', $table_data, true] ]) ->fetch(); ``` 效果: ![](https://img.kancloud.cn/32/61/32614158caf90a03e4934ec97392edc2_1021x607.png)