element UI (table表格)
table 左对齐
<el-table:header-cell-style="{'text-align':'left'}":cell-style="{'text-align':'left'}">
table表格内容过长时显示省略号,并且鼠标悬停时显示全部信息
<el-table-columnproperty="deviceIn":show-overflow-tooltip="true"label="进门设备标识">
</el-table-column>
table多选时,需要disabled某些选项
<el-table-columnalign="center"type="selection":selectable="checkSelect"width="55">
</el-table-column>
/*** methods里面* row:当前行数据* index:当前第几位*/checkSelect (row,index) {let isChecked = true;if (row.dealerName === null) { // 判断里面是否存在某个参数isChecked = true} else {isChecked = false}return isChecked},
table的分页信息靠右
<div style="display: flex;justify-content: flex-end;;margin-top: 10px">
<el-paginationbackground@size-change="sizeChangeOfLoss"@current-change="currentChangeOfLoss"layout="sizes,prev, pager, next,total":current-page="pageOfLoss":page-size="sizeOfLoss":total="totalOfLoss">
</el-pagination>
本身翻页时,序号永远都是从 1 开始,自定义序号,切换页码时,第一页为1-10,第二页就是11-20
--- table表序号列
<el-table-columnlabel="序号"type="index"width="50"><template slot-scope="scope"><span>{{scope.$index+(page - 1) * size + 1}} </span></template>
</el-table-column>
//解决多条记录,刷新数据时,序号不归1
refreshData() {this.initPage();this.initData();
},
//初始化page
initPage() {this.total = 0;this.page = 1;this.size = 10;
},
//初始化数据方法
initData() {this.loading = true;this.getRequest('/card/stu?page=' + this.page + '&size=' + this.size).then(resp => {this.total = resp.total;this.tableData = resp.list;this.loading = false;})
},
去除elementUI表格鼠标移入背景色
html部分
<div class="group"><el-table></el-table>
</div>
css部分
// transparent表示透明效果。
<style>
.group > .el-table--enable-row-hover .el-table__body tr:hover > td {background-color: transparent !important;
}
</style>
表格_合并列
官网提供的是最基础的用法,在实际需求中多数需要从后台拿数据对某个相同的列进行合并。
<el-table...:span-method="objectSpanMethod"...>
</el-table>
这里注意:每次刷新table的时候也需要将合并列的记录 重新初始化,如下(代码中分页方法):
this.spanArr = [];
this.pos = ‘’;
data() {return {...tableData:[],//表格数据spanArr: [],//一个空的数组,用于存放每一行记录的合并数pos:'', //pos是spanArr的索引,需要合并行下标...
},
mounted() {...this.initData();...
},
methods: {//初始化数据initData() {this.getRequest("/url......" ).then(resp => {if (resp) {this.total = resp.total;//分页this.tableData = resp.list;//数据this.getSpanArr(this.tableData);}})},/*合并列 begin*/getSpanArr(data) {// data就是我们从后台拿到的数据for (let i = 0; i < data.length; i++) {//如果是第一条记录(索引为0),向数组中加入1,并设置索引位置if (i === 0) {this.spanArr.push(1);this.pos = 0;//spanArr的索引} else {//如果不是第一条记录,则判断它与前一条记录是否相等//根据相同 扣分类别名称 进行合并,根据需要可进行修改if (data[i].proName === data[i - 1].proName) {//如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}}},objectSpanMethod({row, column, rowIndex, columnIndex}) {if (columnIndex === 2) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {// [0,0] 表示这一行不显示, [2,1]表示行的合并数rowspan: _row,colspan: _col};}},/*合并列 end*///选页sizeChange(currentSize) {this.page = 1;this.size = currentSize;this.spanArr = [];//用于存放每一行记录的合并数this.pos = '';//spanArr下标this.initData();},currentChange(currentPage) {this.size = 10;this.page = currentPage;this.spanArr = [];//用于存放每一行记录的合并数this.pos = '';//spanArr下标this.initData();},
}
element UI (table表格)相关推荐
- Element UI Table表格样式调整
调整Element UI Table表格的样式 最终效果: 单元格合并,样式调整 模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
- element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现 查看Element官网 关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
- element ui table表格轮播
element ui 用table表格示例不用添加任何语法,配上我下方的方法就没可以轻松实现表格轮播效果: 这个方法放在methods()方法里然后在mounted()中调用就可以了,注意我方法里ri ...
- 设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题,亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示 问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...
- Element ui Table表格匹配字典项中的数据
在工作中通常会遇到Table表格匹配字典项中的数据这里介绍几种方法大家仅供参考 <el-table:data="tableData"style="width: 10 ...
- 记录:element UI table 表格 固定列单元格上下错位
一.表格添加ref <el-table ref="table"></el-table> 二.页面切换或数据更新时调用 this.$nextTick(() = ...
- 解决element UI table 表格 固定列单元格错位
最近在使用表格组件的固定列后,才发现表格有样式bug,在使用点击事件切换表格尺寸大小时,会发现固定列样式没有对齐,在切换页面之后,就会出现列错误的现象,如下: 解决方法: 1.给表格添加ref < ...
- element ui table表格合计移到顶部
一.为什么 默认table 的show-summary显示在尾部,如果需要移动到顶部 二.如何移动 没有固定列(通过样式属性order将body移动到后面去.默认的oder:0就排在了前面) /* / ...
- element UI table表格自动生成序号
<el-table-column type="index" width="40" label="序号" align="cen ...
最新文章
- 剑指offer:树的子结构
- StanFord ML 笔记 第四部分
- 阿里开源分布式事务解决方案 Fescar 全解析
- 大学计算机一条指令的执行过程实验,实验四 一条指令的执行过程
- 已禁用对分布式事务管理器(MSDTC)的网络访问。请使用组件服务管理工具启用 DTC 以便在 MSDTC 安全配置中进行网络访问。...
- [转] 《完美程式设计指南》Effective Delphi
- C#委托实现C++ Dll中的回调函数
- js滚动条下拉一定值_JS逆向 | 无限Debugger之淘大象
- vs2015打开EXCEL文档范例及其注意事项!!!
- C++引用计数(reference counting)技术简介(3)
- 42表盘直径是从哪测量_万用表测量电容容量的方
- nideshop小程序商城部署
- java读取mp3文件_java读取mp3文件 | 学步园
- 16/4/4二代支付硬盘故障处理
- keil的终极配色方案(提供配置文件)
- 点云纹理映射 matlab,一种点云模型纹理映射方法与系统与流程
- 给出某个时间段,要求以三十分钟为分割,统计出每三十分钟内数据的数量
- 看《西游记》谈团队管理
- 小程序--微信拼团设计实现
- 计算机专业毕业设计题目大全文库,计算机专业毕业设计论文题目.doc