How to remove the header from the element table

How to remove the header from the element table

Document hints using the show-header
attribute show-header

 <el-table
            :data="tableData1"
            :span-method="arraySpanMethod"
            border
            :show-header="status"
              <el-table-column
              prop="label"
              label=""
              width="180">
            </el-table-column>
           /el-table >

!!!重點就是要:show-header動態控制

Element-ui table removes all borders

el-table add class="customer-no-border-table"

/*Remove table cell borders*/
   .customer-no-border-table th{
     border:none;
   }
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none;
}
 /*Outermost border of the table*/
.customer-no-border-table .el-table--border, .el-table--group{
     border: none;
   }
  /*header border*/
   .customer-no-border-table thead tr th.is-leaf{
     border: 0px solid #EBEEF5;
     border-right: none;
   }
.customer-no-border-table thead tr th:nth-last-of-type(2){
  border-right: 0px solid #EBEEF5;
}
 /*Outermost border of the table - bottom border*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
     width: 0;
   }
.customer-no-border-table::before{
  width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
.customer-no-border-table .el-table__header tr th{
  background: #fff;
  color: #333333 ;
  padding: 3px ;
  fontWeight: 550 ;
  height: 36px ;
  border: 0px;
  font-size: 15px;
}

This is the end of this article about how to remove the header of the element table. For more information about how to remove the header of the element table, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Element table header row height problem solution
  • Vue+Element Custom Vertical Table Header Tutorial
  • Element realizes table nesting and multiple tables share one header
  • Vue implements the header information prompt function in the element table (recommended)
  • Vue+elementui realizes the two-dimensional table function of complex headers and dynamically added columns
  • VUE2.0+ElementUI2.0 table el-table implements header extension el-tooltip

<<:  Basic tutorial on controlling Turtlebot3 mobile robot with ROS

>>:  How to insert a link in html

Recommend

Learn how to use the supervisor watchdog in 3 minutes

Software and hardware environment centos7.6.1810 ...

jQuery implements breathing carousel

This article shares the specific code of jQuery t...

Zookeeper stand-alone environment and cluster environment construction

1. Single machine environment construction# 1.1 D...

25 fresh useful icon sets for download abroad

1. E-Commerce Icons 2. Icon Sweets 2 3. Mobile Ph...

IE8 provides a good experience: Activities

Today I had a sneak peek at IE8 beta 1 (hereafter...

Linux uses NetworkManager to randomly generate your MAC address

Nowadays, whether you are on the sofa at home or ...

CSS implements five common 2D transformations

2D transformations in CSS allow us to perform som...

How to connect Navicat to the docker database on the server

Start the mysql container in docekr Use command: ...

Nexus uses nginx proxy to support HTTPS protocol

background All company websites need to support t...

Vue uses OSS to upload pictures or attachments

Use OSS to upload pictures or attachments in vue ...

How to implement gzip compression in nginx to improve website speed

Table of contents Why use gzip compression? nginx...

JS cross-domain XML--with AS URLLoader

Recently, I received a requirement for function ex...