关于element ui 表格中的常见特殊属性说明

目录
  • 1，表格内容太多用…表示
  • 2，修改element ui自带的样式
  • 3，修改奇数行背景色
  • 4，给表头添加背景色及文字样式
  • 5，表头文字竖向排列(文字带括号)
  • 6，表头边框与文本边框对不齐情况
  • 7，导航栏的侧边栏只展开一个下拉菜单
  • 8，表格表头和内容居中显示
  • 9，添加表格背景色
  • 10，鼠标移入表格高亮显示当前行

element ui 表格的常见特殊属性 1，表格内容太多用...表示2，修改element ui自带的样式3，修改奇数行背景色4，给表头添加背景色及文字样式5，表头文字竖向排列(文字带括号)6，表头边框与文本边框对不齐情况7，导航栏的侧边栏只展开一个下拉菜单8，表格表头和内容居中显示9，添加表格背景色10，鼠标移入表格高亮显示当前行

1，表格内容太多用…表示

有时候表格内容太多一行显示不下，但是又不想换行，换行影响表格美观程度。

解决：在每一行中加：show-overflow-tooltip

效果图：

代码：

普通css样式的…

	white-space:nowrap;//不换行
	overflow: hidden;//超出隐藏
	text-overflow: ellipsis;//变成...

2，修改element ui自带的样式

有时候element ui自带的样式不符合我们的要求，就需要去手动修改，在vue 的less中直接修改是修改不成功的。

解决：在需要修改的类前加一个 /deep/

代码：

3，修改奇数行背景色

代码：

/deep/ .el-table--enable-row-transition .el-table__body td { background： red; }

效果图：

4，给表头添加背景色及文字样式

代码：

：header-cell-style="{background：'#DDDEE0'，color：'#52545A'}"

5，表头文字竖向排列(文字带括号)

给没列一个固定宽度，再设置一个字间距即可

<el-table-column prop="dh" align="center" label="电话" width="105"></el-table-column>
/deep/ .el-table thead.is-group th{
  letter-spacing: 16px;
  text-align: center;
}

效果图：

拓展：表格中的左右括号会显示不出来，需要用上下括号：︵ 起 ︶，起字左右都有一个空格。

6，表头边框与文本边框对不齐情况

问题：

解决：

方法：

在全局中(app.vue)加下面这段代码即可，表示所有的页面中的表格都可以作用的到，在单个页面中加就只能在当前页面可以使用。

body .el-table th.gutter {
display: table-cell !important
}

7，导航栏的侧边栏只展开一个下拉菜单

只展开一个下拉菜单，其余收缩。

在菜单头部加：unique-opened

8，表格表头和内容居中显示

//表格居中
/deep/.el-table td,/deep/.el-table th{
  text-align: center;
}

9，添加表格背景色

 <el-table :header-cell-style="headClass"></el-table>
    // 表格标题
    headClass() {
      return 'background:#bbdaf9;font-weight:normal;color:#000;'
    },

10，鼠标移入表格高亮显示当前行

// 鼠标移入表格
/deep/ .el-table--enable-row-hover {
  .el-table__body tr:hover > td {
    background: #FFC000;
    color: #fff;
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue基础之ElementUI表格详解

    vue基础之ElementUI表格详解

    目录 ElementUI 表格 示例:一个基本的表格 el-table的属性 el-table-column的属性 多级表头 获取表格,重点说下!!! 单选 多选 排序 筛选 自定义列 展开行 总结 ElementUI 表格 前置工作: 安装好vue和elemetUI.如果是按需引入,请确保Table.TableColumn模块已经引入 示例:一个基本的表格 <template> <el-table :data="tableData" stripe="tru

  • Vue elementUI表单嵌套表格并对每行进行校验详解

    Vue elementUI表单嵌套表格并对每行进行校验详解

    目录 效果展示 代码链接 关键代码 表格数据 组件嵌套 校验方法 重置方法 完整代码 总结 效果展示 先看看这是不是需要的效果^_^ 如图,ElementUI 表单里嵌套了表格,表格内每行能进行[保存][新增][编辑][删除][重置]等操作,同时可以对每行的某些字段进行校验(而不是整个表单校验!),这种需求很常见,所以记录下来. 代码链接 gitee地址 关键代码 表格数据 // 数据格式必须是[对象嵌套数组],[form]绑定表单,[list]绑定表格 form: { // 表格数据 list

  • Element-UI中关于table表格的那些骚操作(小结)

    Element-UI中关于table表格的那些骚操作(小结)

    最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考. 具体的使用方法还是建议仔细阅读官网-table章节: https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-s

  • vue基础之详解ElementUI的表单

    vue基础之详解ElementUI的表单

    目录 ElementUI表单 一个简单的案例 表单的主要组件 表单组件的使用 行内的表单 对齐方式 表单验证 自定义的验证规则 表单内组件尺寸控制 总结form模块的属性 form模块的方法 Form Methods(官方文档的,了解一下) form-item模块的属性 总结 ElementUI表单 el的表单官网内容很多,看了一眼觉得心累了.但实际上它使用起来非常的方便,el为我们封装了各种组件,样式也大众. 一个简单的案例 代码如下(使用时确保引入了相关的组件) <template> &l

  • 关于element ui 表格中的常见特殊属性说明

    关于element ui 表格中的常见特殊属性说明

    目录 1,表格内容太多用…表示 2,修改element ui自带的样式 3,修改奇数行背景色 4,给表头添加背景色及文字样式 5,表头文字竖向排列(文字带括号) 6,表头边框与文本边框对不齐情况 7,导航栏的侧边栏只展开一个下拉菜单 8,表格表头和内容居中显示 9,添加表格背景色 10,鼠标移入表格高亮显示当前行 element ui 表格的常见特殊属性 1,表格内容太多用...表示2,修改element ui自带的样式3,修改奇数行背景色4,给表头添加背景色及文字样式5,表头文字竖向排列(文字

  • element ui 表格动态列显示空白bug 修复方法

    在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c

  • element ui表格实现下拉筛选功能

    element ui表格实现下拉筛选功能

    本文实例为大家分享了element ui表格实现下拉筛选的具体代码,供大家参考,具体内容如下 1.default-sort中prop传入要排序的字段(接口返回或自己定义的数据).order代表排序,这里用到降序 2.filters对象中text代表页面中显示的筛选文字,value代表筛选用到的值,在方法中filterHandler用到 3.column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件(绑定的是要对接口中排序的字段) 4

  • Element UI框架中巧用树选择器的实现

    本文介绍了Element UI框架中巧用树选择器的实现,分享给大家,顺便给自己留个笔记,具体如下: 介绍 在Element UI框架中有选择器和树形控件,但是没有树形选择器,也就是图上的这种方式的选择器,所以只能自定义选择器的slot.这里介绍的是多选情况,如果是单选则去掉复选框,修改一部分的处理即可. html部分的代码: <el-select v-model="dataArr" :multiple="multiple" filterable :placeh

  • 解决Vue+Element ui开发中碰到的IE问题

    IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill

  • element ui table（表格）实现点击一行展开功能

    element ui table（表格）实现点击一行展开功能

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击右箭头可以展开,我们的很多需求是点击某一行展开 那是不是无法实现呢?其实,借助element ui的一些属性,轻松实现点击某行展开,我们还是用2.0.9版本官网的例子, 对齐改造,使之可以做到这点 <template> <el-table :data="tableData5&

  • 详解element-ui表格中勾选checkbox，高亮当前行

    详解element-ui表格中勾选checkbox，高亮当前行

    我们在做后台管理系统的时候经常需要操作表格,这里我们要实现的一个功能就是,勾选复选框,高亮显示当前行,也就是当前行样式改变.这是一个非常常见的使用场景,官网给我们提供了一个带Checkbox的table表格,但是并没有给出上述使用案例,解决办法有很多,我简单总结下我自己的实现过程,希望能帮助到有同样需求的小伙伴. 勾选表格中当前项时会触发selection-change事件,在<el-table>中绑定handleSelectionChange方法. <el-table @selecti

  • 使用Element实现表格表头添加搜索图标和功能

    使用Element实现表格表头添加搜索图标和功能

    目录 Element 表格表头添加搜索图标和功能 主要实现 table的slot=‘header’ element ui表格el-tabel给表头加icon图标 设置 Scoped slot 来自定义表头 Element 表格表头添加搜索图标和功能 主要实现 table的slot=‘header’ headerData是表头的循环数组 tableData是表格内容的数组 <template slot="header"></template> 自定义表头的内容 注

  • vuejs+element UI table表格中实现禁用部分复选框的方法

    有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

随机推荐