Why remove the boder border, the reason is that the border of the boder is the same as the background color of the page, and then the table appears to be recessed by one pixel
The requirement to be realized is to remove the border border from the table and add a vertical border at the same time.
But if the boder attribute is not added, the table will have no vertical border
. This kind of bottom has no concave, but it seems irregular.
The final effect you want to achieve is
first thought
The first idea is to find the boder of the table, and then modify the color of the boder through style penetration. There are two obstacles to this idea. The first is that if the border is set to white, the horizontal line of the table will not extend to the border Shen , the second is that only the border pseudo-classes on the left side of the table can be found, but the pseudo-classes on the right side cannot be found
I thought it was there at first .el-table__border-right-patch, but it wasn't
Therefore, only the left side can be modified through style penetration, and display:nonethe left border can be hidden
second way of thinking
The second way of thinking is to use the callback method of the table to add the right border to the table header and the grid cells of the form, and at the same time cancel the right border in the last column.
Of course, you can also add
the left border, but the first column cancels the left border . Header callback:
Form callback:
Add callback method
Callback function code:
const headerCellStyle = ({
columnIndex}) => {
//这里的2是代表最后一列
if (columnIndex !== 2) {
return {
borderRight: "1px #eee solid",
}
}
}
const cellStyle = ({
columnIndex}) => {
if (columnIndex !== 2) {
return {
borderRight: "1px #eee solid"
}
}
}
Achievement effect: there are no borders on the left and right sides, it will not appear concave, and there are vertical lines inside
