Article directory
foreword
Today, I will tell you how to use the slots of tables in the two component libraries of Element Plus and Element UI. Generally, vue2 uses the component library of Element UI. The slots of table components generally use v-slot, while vue3 Using the Element Plus component library, the slot in the table component is generally #default. Let’s talk about these two below.
1. The difference between the two
Both Element Plus and Element UI are Vue.js-based UI component libraries, in which the table components provide slots to customize the content of the table. However, the table slots in Element Plus and Element UI differ as follows:
- table header slot
In Element UI, the name of the table header slot is header, which can be used to customize the header content of the table. In Element Plus, the name of the table header slot is header-, which can be used to customize the table header content of the table. At the same time, column-keyan attribute to specify column-keythe value of the column corresponding to the slot.
- table column slot
In Element UI, the name of the table column slot is default, which can be used to customize the column content of the table. In Element Plus, the name of the table column slot is default, which can be used to customize the column content of the table. At the same time, rowthe and columnparameters can be used in the slot to obtain the data of the current row and column.
- table bottom slot
In Element UI, the name of the slot at the bottom of the table is footer, which can be used to customize the bottom content of the table. In Element Plus, the name of the slot at the bottom of the table is footer-, which can be used to customize the bottom content of the table. At the same time, you can add column-keyan attribute to specify column-keythe value of the column corresponding to the slot.
In general, Element Plus is more flexible in the naming of table slots, and also provides more parameters and attributes to facilitate developers to customize the content of the table.
2. Component library
We can take a look at these two component libraries before using them.
Element Plus: https://element-plus.org/zh-CN/
Element UI: https://element.eleme.cn/#/zh-CN
Above is the link to the component library, if you are interested, you can check it out. There are many rich components that can be used.
Three, specific explanation
First, Element Plus
first opens the component library to find the table component, and we find the custom header.
Check his code after finding it.
We can see that el-table is the entire table component, and el-table-column inside is the data of each column in the table.
You can see that the header of the third column of the table is an input box, and the content of the table is two buttons. This column is the code below.
What can be seen is that it changed the single label to a double label, and the slot operation was carried out in the label. We saw that there is a #header behind the template, which defines the slot in the header, and there is a slot in the slot input, this input is the input box we see in the table header.
The following template is followed by #default, which is the slot for the table content, and the scope behind it is the data of each row. The parameter of the click event below is the data of the current row. Clicking the button of the current row will save the data of the current row Pass it on.
I encountered a problem before. I used #default for slot operations, but I added a button in it and it was not displayed. I used v-slot. Although it can be used, it is not recommended, and some problems may occur. Later, I changed it back, and the button was also displayed. It may be that there were some problems before that it would not be displayed, so try to use #default for slot operations.
Second,
the form of the Element UI component library also has a custom header.
Open the code and take a look.
The basic structure of the table is the same, and the slot method of the table header is similar. If the content uses a slot, it is a slot. There are many ways to write it, but they all have the same meaning.
Summarize
The above is the entire content of this chapter. I have summarized it myself. There may be different ideas. I hope it can help you.