search
个人主页GithubGitee

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

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

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

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

hashtag
二、数据库设计(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;

hashtag
三、PHP实现API(demo)

hashtag
四、前端实现

上一页JavaScript下一页JavaScript调用语音合成Speech Synthesis API