When I wrote a drag calculation today, I didn’t leave enough height at the bottom to get the resultel-tableShow, so it’s addedheightProperty to fix the header and hit a pit

Add height directly to the official example to fix the header, but there is a white space on the right side of the header. (The official example also has this problem, but the official theme is white, so you cannot see it.)

                <el-table
                    :data="tableData"
                    border
                    class="my-el-table"
                    header-row-class-name="custom-table-header-row"
                    height="310"
                    row-class-name="custom-table-row"
                    style="width:100%"
                >
                    <el-table-column align="center" label="Serial number" type="index" width="50" />
                    <el-table-column align="center" label="Date" prop="date" width="180" />
                    <el-table-column align="center" label="Name" prop="name" width="180" />
                    <el-table-column align="center" label="Address" prop="address" />
                </el-table>
Copy the code

After modifying the style using the browser F12

This can be done by customizing the style of the EL-Table

/deep/.my-el-table {
    overflow-x: hidden;
    .el-table__header-wrapper {
        .el-table__header {
            width: calc(100% + 32px) ! important; } } .el-table__body-wrapper {width: calc(100% + 16px) ! important; .el-table__body {width: calc(100% + 16px) ! important; }}}Copy the code

This is essentially giving the table a fixed width, widening the table, and then the tableoverflow-x: hiddenIf the scroll bar goes beyond the contents of the table, the scroll bar is not visible, but the scroll function still exists, which is equivalent to visually canceling the scroll bar display

This method is aimed at the computer with 1920 * 1080 resolution and measured down 1366 * 768, so there may be slightly irregular visual effect of the table (it may also be the problem of the computer).

The actual observation does not seem to be inconsistent

This method is not just for el-Table

Most of the time because the browser scrollbar style is too ugly, need to adjust the scrollbar style, we can use this method to hide the scrollbar effect, but the actual scrollbar function still exists.

If the bosses have a better solution, let us know.