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

A brief comparison of Props in React

Table of contents Props comparison of class compo...

How to query duplicate data in mysql table

INSERT INTO hk_test(username, passwd) VALUES (...

Summary of the differences between global objects in nodejs and browsers

In Node.js, a .js file is a complete scope (modul...

PyTorch development environment installation tutorial under Windows

Anaconda Installation Anaconda is a software pack...

How to use mysqladmin to get the current TPS and QPS of a MySQL instance

mysqladmin is an official mysql client program th...

Detailed explanation of ES6 Promise usage

Table of contents What is a Promise? Usage of rej...

Detailed steps for installing JDK and Tomcat on Linux cloud server (recommended)

Download and install JDK Step 1: First download t...

How to change the root user's password in MySQL

Method 1: Use the SET PASSWORD command mysql> ...

In-depth study of vue2.x--Explanation of the h function

Table of contents Solution, Summarize: vue projec...

Detailed tutorial on using VMware WorkStation with Docker for Windows

Table of contents 1. Introduction 2. Install Dock...

MySQL log trigger implementation code

SQL statement DROP TRIGGER IF EXISTS sys_menu_edi...

Three steps to solve the IE address bar ICON display problem

<br />This web page production skills tutori...