How to use iview's Table component to merge table columns
The content of this article is about how to use the Table component of iview to merge the columns of the table. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
iview’s Table component header grouping
iview’s Table component header grouping
Requirement Description
Merge table header
Merge columns, display [total]
Final rendering effect
Question
Header There are duplicate keys, how to match the data
To implement merged columns-it is necessary to modify the Table component to achieve
1. Merge table header
According to the demo provided by iview, it can be seen that editing the header is relatively easy, and you only need to write it according to the format.
Problem: There are duplicate keys in the header, how to match the header and table data
Solution:
Table header key_supplier ID that needs to be grouped
Table data key_supplier ID that needs to be grouped
[ { "width":"200", "align":"center", "title":"物品名称", "ellipsis":true, "key":"name", }, { "width":"100", "align":"center", "title":"数量", "ellipsis":true, "key":"purchaseAmount", }, { "width":"166", "align":"center", "title":"lyy369", "ellipsis":true, "key":"supplier_11113173785", "children":[ { "width":"100", "align":"center", "title":"单价(元)", "ellipsis":true, "key":"quoteUnitPrice_11113173785", }, { "width":"100", "align":"center", "title":"总计(元)", "ellipsis":true, "key":"quoteTotalPrice_11113173785", } ] }, { "width":"166", "align":"center", "title":"私人定制", "ellipsis":true, "key":"supplier_11113173838", "children":[ { "width":"100", "align":"center", "title":"单价(元)", "ellipsis":true, "key":"quoteUnitPrice_11113173838", }, { "width":"100", "align":"center", "title":"总计(元)", "ellipsis":true, "key":"quoteTotalPrice_11113173838", } ] } ]
[ { "name":"手动添加", "purchaseAmount":"9887.00", "quoteTotalPrice_11113173785":"494350.00", "supplierId_11113173785":"11113173785", "quoteAmount_11113173785":"9887.0000", "quoteUnitPrice_11113173785":"50.0000", "quoteTotalPrice_11113173838":"988700.00", "supplierId_11113173838":"11113173838", "quoteAmount_11113173838":"9887.0000", "quoteUnitPrice_11113173838":"100.0000" }, { "name":"2018年7月9日", "purchaseAmount":"1.00", "quoteTotalPrice_11113173785":"50.00", "supplierId_11113173785":"11113173785", "quoteAmount_11113173785":"1.0000", "quoteUnitPrice_11113173785":"50.0000", "quoteTotalPrice_11113173838":"100.00", "supplierId_11113173838":"11113173838", "quoteAmount_11113173838":"1.0000", "quoteUnitPrice_11113173838":"100.0000" }, { "name":" 中国移动取消流量“漫游”费", "purchaseAmount":"563.00", "quoteTotalPrice_11113173785":"28150.00", "supplierId_11113173785":"11113173785", "quoteAmount_11113173785":"563.0000", "quoteUnitPrice_11113173785":"50.0000" }, { "name":" 中国移动取消流量“漫游”费", "purchaseAmount":"23.00", "quoteTotalPrice_11113173785":"1150.00", "supplierId_11113173785":"11113173785", "quoteAmount_11113173785":"23.0000", "quoteUnitPrice_11113173785":"50.0000", "quoteTotalPrice_11113173838":"2300.00", "supplierId_11113173838":"11113173838", "quoteAmount_11113173838":"23.0000", "quoteUnitPrice_11113173838":"100.0000" } ]
2. Realize the merged column display of [Total]
You need to change the source code of iview's Table component here.
The data format is as follows, control rows, control columns, control the number of merges, and control the display data
[ {// 每一条,表示有一行 "total":"合计", // 展示的数据 "key":"total", // 表头的key "align":"center", "ellipsis":true, "colspan":"2", // 需要计算合并列的个数 "tableBody":[ // tableBody.length 表示有多少个值 { "total_11113173785":"523700.00", "key":"total_11113173785", "colspan":"2", "align":"center", "ellipsis":true }, { "total_11113173838":"991100.00", "key":"total_11113173838", "colspan":"2", "align":"center", "ellipsis":true } ] } ]
-
The following It is a modified source code. It does not currently support events such as mouse movement into the table.
table-body.vue:33
Copy after login
<!-- ++++++++++++++++ 2018年8月7日16:49:00 合并列单元格 start +++++++++++++++++++++ --> <template> <template> <table-tr> <td> <cell></cell> </td> <template> <td> <cell></cell> </td> </template> </table-tr> </template> </template> <!-- ++++++++++++++++ 合并列单元格 end +++++++++++++++++++++ -->
Related recommendations:
element-uiHow to reuse Table components
How to use the on-change attribute in IView
Solution to the misalignment of iview's select drop-down box options
JS table component artifact bootstrap table detailed explanation (basic version)
The above is the detailed content of How to use iview's Table component to merge table columns. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.

Cockpit is a web-based graphical interface for Linux servers. It is mainly intended to make managing Linux servers easier for new/expert users. In this article, we will discuss Cockpit access modes and how to switch administrative access to Cockpit from CockpitWebUI. Content Topics: Cockpit Entry Modes Finding the Current Cockpit Access Mode Enable Administrative Access for Cockpit from CockpitWebUI Disabling Administrative Access for Cockpit from CockpitWebUI Conclusion Cockpit Entry Modes The cockpit has two access modes: Restricted Access: This is the default for the cockpit access mode. In this access mode you cannot access the web user from the cockpit

As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning

Combination of Golang and front-end technology: To explore how Golang plays a role in the front-end field, specific code examples are needed. With the rapid development of the Internet and mobile applications, front-end technology has become increasingly important. In this field, Golang, as a powerful back-end programming language, can also play an important role. This article will explore how Golang is combined with front-end technology and demonstrate its potential in the front-end field through specific code examples. The role of Golang in the front-end field is as an efficient, concise and easy-to-learn

PHP belongs to the backend in web development. PHP is a server-side scripting language, mainly used to process server-side logic and generate dynamic web content. Compared with front-end technology, PHP is more used for back-end operations such as interacting with databases, processing user requests, and generating page content. Next, specific code examples will be used to illustrate the application of PHP in back-end development. First, let's look at a simple PHP code example for connecting to a database and querying data:
