Vue之element-UI使用记录整理

目录

 

前言：

日期选择器

表格和表格分页页脚

---

前言：

在使用Vue+Element-UI开发页面的过程中遇到许多坑，在此记录一下，方便自己日后查看，也给各位同学提供一些参考。

其实Element-UI的官方文档还是比较详细的，只是有些属性值需要自己不断摸索实践。遇到问题，头脑清醒，理智分析当能解决。

本文基于element-UI版本以及Vue2！！！！！

---

日期选择器<el-date-picker>

日期选择器需要注意以下几个属性：type    format    value-format

type是日期选择器的类型属性，常用类型有date(日期),week(周),month(月),year(年),dates(多个日期)。

format是日期选择器的显示样式属性，由y(表示年)，M(表示月)，d(表示日)【注意这里的yMd区分大小写】。

常用的日期显示格式如：

format="yyyy/MM/dd"表示的时间如：2020年9月1日<=====>"2020/09/01"

format="yy-M-d"表示的时间如：2020年9月1日<=====>"20-9-1"   如果表示的时间为2020年10月10日<=====>"20-10-10"

以上例子可以看出，显示的日期格式可以通过format属性指定，经测试年月日之间的连接符不是只能"/"或"-"也可以随意指定，比如："+"，"*"等特殊符号，或者中文字也可以，例如：format="yy年M月d日"

value-format是日期选择器的真实值属性，如果不设置默认为value-format="date".这种date格式显示如下：

如果觉得获取这种日期格式不方便计算和使用，建议使用value-format="timestamp"把真实值格式设置为时间戳形式，这样比较容易计算和转变。

表格<el-table>和表格分页页脚<el-pagination>

<el-table
   :data=" tableData.slice((currentPage1 - 1) * pageSize,currentPage1 * pageSize) "
   style="width: 100%"
   stripe
   @cell-click="tabledbclick"
   :row-class-name="tableRowClassName"
   :height="370 + 'px'"
   align="center"
   :show-header="false"
>

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="pageSize"
layout="prev, jumper, next,total"
:total="listnum"
>
</el-pagination>

stripe属性：el-table实现斑马纹

实现分页功能主要注意以下内容：

1、表格的数据需要进行分页处理:data="tableData.slice((currentPage1 - 1) * pageSize,currentPage1 * pageSize)"

2、需要设置当前页码【currentPage1】和每页大小【pageSize】（可自定义名称）

3、将el-pagination的属性与el-table的属性关联

包括  :current-page.sync="currentPage1"  以及  :page-size="pageSize"

并设置改变当前页和页码大小事件

@size-change="handleSizeChange"

handleSizeChange (val) {

      this.pageSize = val    }

@current-change="handleCurrentChange"

    handleCurrentChange (val) {

      this.currentPage1 = val

    }

附上一个el-table的实例https://blog.csdn.net/chen_cm/article/details/109509181

---

PS：我会尽量补充和完善本篇博客，但由于工作关系，所以更新时间不定，有问题可以留言探讨。

原创不易，请勿随意使用CV大法，转载请标明出处。