本文介绍了如何使用Element UI构建包含时间范围选择器的表单，确保时间限制在一个月内，并结合Vue实现前端分页及搜索功能，包括数据格式转换和动态筛选。
目录
4.对 Element UI table中数据进行二次处理展示
1.element构建时间范围选择器
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
class="form"
>
<el-form-item label="起始时间" prop="startTime">
<el-date-picker
v-model="form.startTime"
type="datetime"
style="width: 50%"
placeholder="选择起始时间"
value-format="yyyy-MM-dd HH:mm:ss"
@change="changeStartTime"
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
v-model="form.endTime"
style="width: 50%"
type="datetime"
placeholder="选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
@change="changeEndTime"
>
</el-date-picker>
</el-form-item>
</el-form>methods：
//选择日期后触发change方法，将开始和结束时间转为时间戳进行对比，不符合约束条件就清空该日期重新选择
changeStartTime(val) {
let date = new Date(val).getTime();
this.startTime = date;
if (this.endTime) {
if (this.endTime < this.startTime) {
this.$message.error("开始时间不能大于结束时间");
this.form.startTime = "";
this.startTime = null;
}
}
},
changeEndTime(val) {
let date = new Date(val).getTime();
this.endTime = date;
if (this.startTime) {
if (this.endTime < this.startTime) {
this.$message.error("结束时间不能小开始时间");
this.form.endTime = "";
this.endTime = null;
}
}
}
2.element中时间选择器的范围
需求：
1.两个时间选择器组成一个时间段，并且只能范围是一个月。
2.如果先设置了结束日期，则起始日期的选择范围往前推一个月
3.结束日期不得小于起始日期
:picker-options 中的disabledDate 这个属性是判断禁用范围，参数为当前日期
<el-form-item label="时间：">
<el-date-picker type="datetime" placeholder="选择日期时间" v-model="formInline.startTime" :picker-options="pickerOptions0">
</el-date-picker>
---
<el-date-picker type="datetime" placeholder="选择日期时间" v-model="formInline.endTime" :picker-options="pickerOptions1">
</el-date-picker>
</el-form-item>methods：
pickerOptions0: {
disabledDate: (time) => {
if (this.formInline.endTime != "") {
let curDate = this.formInline.endTime.getTime();
let three = 31 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return (
time.getTime() > this.formInline.endTime || time.getTime() < threeMonths
);
} else {
return time.getTime() > Date.now();
}
},
},
pickerOptions1: {
disabledDate: (time) => {
if (this.formInline.startTime != "") {
let curDate = this.formInline.startTime.getTime();
let three = 31 * 24 * 3600 * 1000;
let threeMonths = curDate + three;
return (
time.getTime() < this.formInline.startTime || time.getTime() > threeMonths
);
} else {
return time.getTime() > Date.now();
}
},
},
3.vue+element实现前端分页及前端搜索功能
分页加表格很常见，基本实现：前台分页和后台分页。这里讲一下如何实现前台分页及搜索功能。
1）页面布局
<template>
<div>
<el-row>
<el-col :span="6">
<el-input v-model="searchData" placeholder="输入姓名搜索">></el-input>
</el-col>
<el-col :span="2">
<el-button type="success" @click="search">搜索</el-button>
</el-col>
</el-row>
<el-table :data="list">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
:page-sizes="[1, 2,5, 10]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>2）绑定数据
data() {
return {
list: [],
data: [],
limit: 5,
total: null,
page: 1,
searchData: "",
}
},3）获取数据
因为没有后台，就前台模拟取了数据
created() {
this.pageList()
},- 注意： 首次展示数据时，将全部数据暂存保存在this中，方便之后操作
pageList() {
// 发请求拿到数据并暂存全部数据
this.data = listJson.list
this.getList()
},
getList() {
// es6过滤得到满足搜索条件的展示数据list
let list = this.data.filter((item, index) =>
item.name.includes(this.searchData)
)
//过滤分页
this.list = list.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
//分页的总数据
this.total = list.length
},4）当每页数量改变
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val
this.getList()
},5）当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},6）搜索过滤数据
search() {
this.page = 1
this.getList()
}如果搜索过后遇到this.page 变了，但是页面当前页码并没有变的问题，可以参考：http://t.csdn.cn/3gzQI，完整的demo代码：
<template>
<div>
<el-row>
<el-col :span="6">
<el-input v-model="searchData" placeholder="输入姓名搜索"></el-input>
</el-col>
<el-col :span="2">
<el-button type="success" @click="search">搜索</el-button>
</el-col>
</el-row>
<el-table :data="list">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
var listJson = {
list: [
{ name: 'aa', age: 12 },
{ name: 'bb', age: 13 },
{ name: 'cc', age: 14 },
{ name: 'ad', age: 15 },
{ name: 'eaae', age: 16 },
{ name: 'faaf', age: 16 },
{ name: 'hah', age: 17 },
{ name: 'ii', age: 18 },
{ name: 'rar', age: 19 },
{ name: 'dd', age: 10 },
]
}
export default {
data() {
return {
list: [],
data: [],
limit: 5,
total: null,
page: 1,
searchData: "",
}
},
created() {
this.pageList()
},
methods: {
pageList() {
// 发请求拿到数据并暂存全部数据,方便之后操作
this.data = listJson.list
this.getList()
},
// 处理数据
getList() {
// es6过滤得到满足搜索条件的展示数据list
let list = this.data.filter((item, index) =>
item.name.includes(this.searchData)
)
this.list = list.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
this.total = list.length
},
// 当每页数量改变
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val
this.getList()
},
// 当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},
// 搜索过滤数据
search() {
this.page = 1
this.getList()
}
},
}
</script>
4.对 Element UI table中数据进行二次处理展示
1）时间——日期
后台经常给我们返回的是 时间戳 （例如：1535620671），这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 （YYYY-MM-DD HH:mm:ss）；如果是在Element UI table中 我们需要用到 formatter 属性用来格式化内容；
<el-table-column prop="Start" :formatter="dateFormat" label="开始时间"></el-table-column>methods：
dateFormat:function(row, column) {
var date = row[column.property];
if (date == undefined) {
return "";
}
return moment(date).format("YYYY-MM-DD HH:mm:ss");
},2）0—1 是—否 成功—失败
将后台返回给我们的0或者1 转换成我们需要的状态 例如 是否 成功失败 或者颜色状态；
<el-table-column prop="IsConst" :formatter="formatRole" label="是否是常量"></el-table-column>methods：
formatRole: function(row, column) {
return row.IsConst == true ? "是": "否"
},
扫一扫
6759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
