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

Issues and precautions about setting maxPostSize for Tomcat

1. Why set maxPostSize? The tomcat container has ...

How to disable web page styles using Firefox's web developer

Prerequisite: The web developer plugin has been in...

The difference between method=post/get in Form

Form provides two ways of data transmission - get ...

MySQL dual-master (master-master) architecture configuration solution

In enterprises, database high availability has al...

Analysis of three parameters of MySQL replication problem

Table of contents 01 sql_slave_skip_counter param...

How to quickly deploy Gitlab using Docker

1. Download the gitlab image docker pull gitlab/g...

MySQL 5.7 and above version download and installation graphic tutorial

1. Download 1. MySQL official website download ad...

mysql5.7 create user authorization delete user revoke authorization

1. Create a user: Order: CREATE USER 'usernam...

JavaScript common statements loop, judgment, string to number

Table of contents 1. switch 2. While Loop 3. Do/W...

JavaScript String Object Methods

Table of contents Methods of String Object Method...

Docker container introduction

1. Overview 1.1 Basic concepts: Docker is an open...

MySQL deadlock routine: inconsistent batch insertion order under unique index

Preface The essence of deadlock is resource compe...

Introduction and installation of MySQL Shell

Table of contents 01 ReplicaSet Architecture 02 I...

Detailed explanation of how to connect Java to Mysql version 8.0.18

Regarding the connection method between Java and ...

The best solution for implementing digital plus and minus buttons with pure CSS

Preface: For the implementation of digital additi...