0
点赞
收藏
分享

微信扫一扫

Element-UI使用与爬坑集合

四、el-table显示的表格中自己额外添加一列,序号:1,2,3……

4.1 添加一列,不管分不分页,都是从1、2、3……整个数组的长度

4.2 分页显示,添加一列序号,但是每页的序号都是从1、2、3……到每页显示的总条数

五、获取当前鼠标点击的元素的属性内容,区分鼠标点击的是哪个HTML元素

六、el-table获取点击click选中行的值

七、V-for渲染时候(比如table、li等),点击当前行,获得当前行数据,以及event当前事件对象

八、设置部分动态样式,部分固定样式


Element-UI使用与爬坑集合

=====================

一、Element-UI各UI控件属性使用加不加冒号(:)整理


正常情况下,加“:”表示赋值的是变量,不加表示赋值的是值本身。

但是有时候发现经常不管用,常见的如下:

如果属性类型为Number:

如果属性类型为Object:

如果属性类型为string:

如果属性类型为boolean:

主要按钮


二、el-menu组件作为route-view时候,刷新页面后,默认active状态(default-active)与当前路由页面不一致


![](https://img-blog.csdnimg.cn/20191113150831333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,te 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 xt_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc=,size_16,color_FFFFFF,t_70)

解决思路:给menu的default-active属性绑定this.$route.path

操作流程:

1):设置default-active属性

:default-active=“this.$route.path” //有的可能不需要加this

2)针对route.path的值,设置menu的index属性,与to路径一致即可。

统计分析

项目列表

地图展示


三、el-table实现分页显示


实现思路:在el-table的data属性中,加一个根据分页动态slice的方法,算出每页该展示的内容

操作流程:

1)添加分页控件

<el-pagination

@current-change=“handleCurrentChange”

:current-page.sync=“currentPage”

:page-size=“pagesize”

layout=“total, prev, pager, next”

:total=“detailstableData_length”>

2)设置el-table的data属性

<el-table

:data=“detailstableData.slice((currentPage-1)pagesize,currentPagepagesize)”

style=“width: 100% ;” height=‘740’>

  1. vue的script标签内,在data里面定义相关变量

export default{

data(){

return{

detailstableData:[], //存储table数据的

detailstableData_length:0, //记录数据的总长度

currentPage:1, //当前显示第一页

pagesize:10, //每页10条记录

}

}

}

实现效果:


四、el-table显示的表格中自己额外添加一列,序号:1,2,3……


应用场景:

一般el-table表格中,每一行是一条json对象的记录,获得结果后,需要额外给结果添加一列序号,便于在table中展示。

4.1 添加一列,不管分不分页,都是从1、2、3……整个数组的长度

解决思路:

json对象新建一个属性,并循环赋值1、2、3……

json对象新建一个属性: json.newParam=“index”;

给新建的属性赋值:json.index=“1”;

实现办法:

var self =this;

var i=1;

self.detailstableData=[];

self.xmlbData.map(item =>{

item.newParam=‘index’;

item.index=i++;

self.detailstableData.push(item);

});

//xmlbData是待遍历的数组

4.2 分页显示,添加一列序号,但是每页的序号都是从1、2、3……到每页显示的总条数

解决思路:

每一页都动态计算下

实现方式:

<el-table-column

fixed="left"

label=“序号”

type=“index”

width=“50”

align=“center”>

{{ scope.$index + (pageNumber - 1) * pageSize + 1 }}

举报

相关推荐

Element-ui组件踩坑记录

element ui-table爬坑

Element-UI

element-UI

Element-ui

element-ui组件的使用

element-ui vue

0 条评论