整理vue + element-ui常用的功能及代码片段

目录:
1 常用表头搜索:input+select+daterange
2 表格中对【上下架】、【排序】、【选择】进行编辑
3 使用vue-clipboard2实现复制链接的功能
4 使用vue-qUIll-editor实现富文本编辑
5 解决el-input类型为 tyPE=’number’ 不显示上下箭头
6 解决当el-select选中值绑定为对象时处理
7 使用upload照片墙多图上传-自定义方式显示(方便回显编辑)
8 vue+element-ui+form 实现动态生成表单
9 vue+element-ui+table 实现动态表头+可编辑表格
10 table表格组件自定义索引,多页数据从1开始排序
11 饿了么自定义滚动条el-scrollbar组件

1.常用表头搜索:input+select+daterange

element 表格搜索,如果页码出现大量变换,一般重置第一页开始展示

element 分页,切换一页显示条数方法,如果页码出现大量变换,一般重置第一页开始展示

2.表格中对【上下架】、【排序】、【选择】进行编辑

3.使用vue-clipboard2实现复制链接的功能

1.安装vue-clipboard2插件

2.在main.js里引入:

3.在.vue页面中使用

4.在methods中写入方法

4.使用vue-quill-editor实现富文本编辑

1.安装依赖

2.在main.js里引入:

3.在.vue页面中使用

4.在methods中写入方法

5.解决el-input类型为 type=’number’ 不显示上下箭头

整理vue + element-ui常用的功能及代码片段
改变之前
整理vue + element-ui常用的功能及代码片段
改变之后

1.html代码:

2.css代码:

6.解决当el-select选中值绑定为对象时处理

要点:value绑定的是对象时,在el-select 添加value-key=”id”属性,el-option中添加:key=”item.id”属性。其中value-key的值与key绑定的属性值对应。

7.使用upload照片墙多图上传-自定义方式显示(方便回显编辑)

整理vue + element-ui常用的功能及代码片段
自定义显示图片数组

8.vue+element-ui+form 实现动态生成表单

整理vue + element-ui常用的功能及代码片段
初始状态
整理vue + element-ui常用的功能及代码片段
点击添加之后
整理vue + element-ui常用的功能及代码片段
可切换活动类型

elementUI官网有对单表单的添加,实现方式是,先写死一个必须的表单,需要新增表单的放在一个div里,在div中使用v-for生成,达到同时增加的效果
以下为代码(请灵活运用):

注意:删除行的话 本地删除或者接口删除要根据后台定义,要是本地删除就更简单了。参考文章

9.vue+element-ui+table 实现动态表头+可编辑表格

项目要求:
1.根据选择不同属性类型显示不同的表头,表头中销售价格、市场价格、属性图是固定的
2同时属性类型及属性类型的值都是动态的
3同时可以动态添加或删除一条数据

整理vue + element-ui常用的功能及代码片段
表头一
整理vue + element-ui常用的功能及代码片段
表头二

以下为代码(固定表头的图片字段部分去掉了,不是此次要点):

动态渲染表头核心代码(通过一个循环拿到列的标签和列名):

要点:在自定义模板里面通过scope.row[scope.column.property]取到当前行的列字段与下拉框进行双向绑定,这样就是实现了可编辑的动态表头的表格。参考文章

10.table组件自定义索引,多页数据从1开始排序

定义type=index表示索引列
自定义索引方法 :index="indexMethod"

tips:
this.pageNum:表示当前页码数
this.pageSize:表示每页显示的条数
index:table中:表示数据的索引,从0开始
(this.pageNum-1) * this.pageSize +index +1 :表示当前页的索引开始值
例如:每页显示10条数据,第三页起始值则为21开始。(3-1)* 10 + 0 + 1 = 21

11 饿了么自定义滚动条el-scrollbar组件
整理vue + element-ui常用的功能及代码片段
image.png

滚动条组件

(1)已知内容高度

未经允许不得转载:一点博客-青梅煮码-共享博客 » 整理vue + element-ui常用的功能及代码片段
分享到:
赞(2) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏