使用ElementUI配合API数据快速渲染合并表格

一、需求描述 数据来源于后端API

要求,对item字段进行合并,并统计item的小计值

体验地址:
https://test.hamm.cn/table

二、数据库设计(MySQL)

CREATE TABLE `item` (
  `item_id` int(11) NOT NULL,
  `item_row` int(11) NOT NULL,
  `item_body` varchar(255) NOT NULL,
  `item_cropnum` int(11) NOT NULL,
  `item_premoney` int(11) NOT NULL,
  `item_pretax` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `item` (`item_id`, `item_row`, `item_body`, `item_cropnum`, `item_premoney`, `item_pretax`) VALUES
(1, 1, '北京', 1, 100, 100),
(2, 1, '上海', 2, 200, 200),
(3, 1, '上海', 3, 300, 300),
(4, 2, '上海', 3, 300, 300),
(5, 2, '上海', 2, 200, 200),
(6, 2, '北京', 1, 100, 100);

CREATE TABLE `row` (
  `row_id` int(11) NOT NULL,
  `row_date` varchar(255) NOT NULL,
  `row_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `row` (`row_id`, `row_date`, `row_name`) VALUES
(1, '2020-05', '张三'),
(2, '2020-05', '李四'),
(3, '2020-05', '王五');

ALTER TABLE `item`
  ADD PRIMARY KEY (`item_id`);

ALTER TABLE `row`
  ADD PRIMARY KEY (`row_id`);

ALTER TABLE `item`
  MODIFY `item_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
  
ALTER TABLE `row`
  MODIFY `row_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

三、PHP实现API(demo)

四、前端实现