element表格去掉表头的实现方法

文档提示用属性show-header

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

!!!重点就是要：show-header动态控制

Element-ui table去掉所有边框

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

/*去掉表格单元格边框*/
   .customer-no-border-table th{
     border:none;
   }
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none;
}
 /*表格最外边框*/
.customer-no-border-table .el-table--border, .el-table--group{
     border: none;
   }
  /*头部边框*/
   .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;
}
 /*表格最外层边框-底部边框*/
.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;
}

到此这篇关于element表格去掉表头的实现方法的文章就介绍到这了,更多相关element表格去掉表头内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue+Element自定义纵向表格表头教程

    如下所示: 代码如下: <table style="width: 100%" class="myTable"> <tr v-for="(item,i) in statDatas" :key="i"> <td class="column">{{ item.key }}</td> <td class="column">{{ item

  • Vue+elementui 实现复杂表头和动态增加列的二维表格功能

    先上完成的效果图:列是根据查询结果增加的 数据格式: 表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element.品名, 面取数: element.面取数, LOTNO: element.LOT }); element table中: <el-table-column v-for="(item,index) in thead" :prop="item.LOTNO" :key=

  • vue实现element表格里表头信息提示功能(推荐)

    如图:在element表格操作一栏需要添加提示功能 实现效果 如图:鼠标浮上去弹出tips 解决方案 1.编写组件 在 promptMessage.vue 文件里面实现 <template> <!-- 处理element表格表头文字提示特别添加全局注册组件 --> <div class="promt-message-tooltip"> <el-tooltip effect="light" placement="le

  • Element表格表头行高问题解决

    Element表格表头行高问题解决

    目录 前言 一.问题原因 二.解决方法 Vue 修改 elementUI table tr th 的高度,以及背景颜色 前言 在最近一个项目的后台管理系统中,写前端界面时用到了ElementUI,但是发现导入数据表格之后表头的高度一直很高,如下图所示: 在网页上搜索了很多的解决办法,都没有作用.后来折磨了一段时间后解决了这个问题,在此进行记录. 提示:以下是本篇文章正文内容,下面案例可供参考 一.问题原因 在网页中检查代码时发现没有style来设置表格表头的高度,只有调整.el-main中的li

  • VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

    ElementUI2.0的表格的扩展: elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢? <el-table empty-text="正在加载中..." :data="contentList" style="width: 100%" @sort-change="sort" class="pro-table-item" too

  • Element实现表格嵌套、多个表格共用一个表头的方法

    一.分析需求 这里先上一张图说明 需求 : 根据后端返回的数据 ( res 是一个数组,它的元素是一个对象,对象里面的 ext 属性是一个对象,它又包含了, default . free 和 pay 三个属性,且这三个都是数组格式.): 渲染出一个这样子的 表格 : res 数据: res 的每一个元素的直接属性 name (即为邮费模板名称,比如成都运费模板), res 的 ext 属性下的三个数组 default . free . pay ,每一个数组要大的一行(这一行中,第一列是运送到的地

  • element表格去掉表头的实现方法

    文档提示用属性show-header <el-table :data="tableData1" :span-method="arraySpanMethod" border :show-header="status" <el-table-column prop="lable" label="" width="180"> </el-table-column> /

  • 基于Element封装一个表格组件tableList的使用方法

    我们项目中使用的表格一般都比较类似,如果不进行封装的话,那么每个页面都可能有一些类似的代码.不仅浪费时间,而且由于开发人员不同的开发习惯.后期维护人员需要花费一点时间去看每个人的代码.所以我直接将表格做一个二次封装,只要一个人去维护这份代码即可.下面是我封装的内容 内容: 1.支持直接传入后台请求地址渲染列表,且参数修改之后自动刷新 2.支持自定义每一列的显示 3.支持根据内容自动撑开列宽 4.支持动态筛选表头 5.支持分页 6.防抖 7.列权限 ... 更多请自行尝试 以下是tableList

  • vue element table 表格请求后台排序的方法

    1.ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据. <el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descendin

  • js表头排序实现方法

    本文实例讲述了js表头排序实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <script type="text/javascript">     //是否递减排序     var isDescending = true;     /*****************************************     * 要排序的行必须放到<tbody></tbody>标签中     * tableId:排序表格ID

  • element表格行列的动态合并示例详解

    element表格行列的动态合并示例详解

    目录 效果图 代码详解 数据结构 行合并 列合并 完整代码+注释 效果图 合并行 合并列 element的table提供了合并行或者列的方法,并且有一个示例,传送入口:element.eleme.cn/#/zh-CN/com… 但是实际应用中,后台数据的返回格式和指定合并肯定是动态且没有规律的.element的示例过于简单,并且也没有什么太多的解释.实操中就碰到了这个问题.现在记录下来. 代码详解 实操中,需要合并的代码通常就是子数据需要进行合并,因为后台返回的格式都是父数据中包裹着子数据,这种

  • vue+element表格实现多层数据的嵌套方式

    目录 vue+element表格实现多层数据嵌套 这是完成之后的 方法   vue+element表格实现多层数据嵌套 今天用element的表格渲染了商城的购物车列表,element的表格之前也用到过,它把所有的东西都封装好了, 这是完成之后的    只需要往里面传数据就可以了,通过prop来拿到相对应的字段,非常方便,但是天不尽人愿呐,后台接口返回的数据   是嵌套多了一层,直接上图,后台返回的数据结构    data下面是店铺的名字和id,orderItemList是店铺下面的商品,店铺要

  • jQuery 实现批量提交表格多行数据的方法

    批量提交用jquery操作起来还是很方便的,主要的思路就是 在动态生成表格时每一行都存下这条数据的唯一id,然后监听选择,把选中的数据放入数组,最后提交到后台就OK了. 先上一部分代码(这是表头以及一个全选按钮) <table class="ui_table ui_table_hover ui_table_striped ui_table_style02 table_fixed"> <tr> <th width="3%" class=&

  • 使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法

    如下所示: # coding=utf-8 import pandas as pd # 读取csv文件 3列取名为 name,sex,births,后面参数格式为names= names1880 = pd.read_csv("names_1880.txt", names=['name', 'sex', 'births']) print names1880 print names1880.groupby('sex').births.sum() 输出如下 最后一行是说按sex分组并计算bir

随机推荐