Element UI中使用过滤器

http://element-ui.cn/#/zh-CN

创建基本文件

html 文件中引入css和js文件,参考网站的教程,使用相应的标签,这里做了一个简单的带有查询功能的表格。
效果如下:

info.gif

上面的Gif中,在表格中的时间一列,使用了过滤器,将new Date()得到的时间转化为yyyy-mm-dd

实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<title>vue-test2</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<template>
<el-table :data="handlesearch(tableData)" stripe style="width: 49%">
<el-table-column type="index" label="序号" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄">
</el-table-column>
<!-- element ui 使用过滤器 -->
<el-table-column prop="stime" label="时间">
<template slot-scope="scope">{{ scope.row.stime | dateFormat }}</template>
</el-table-column>

<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" @click="handledelete(scope.$index)" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
<!-- 过滤器 -->
Vue.filter("dateFormat", function(dataStr) {
var dt = new Date(dataStr);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();

return y + "-" + m + "-" + d + " " + hh + ":" + mm + ":" + ss
})

var vm = new Vue({
el: "#app",
data: {
name: "",
age: "",
search: "",
tableData: [{
name: "donlex1",
age: "18",
stime: new Date()
},
{
name: "donlex2",
age: "19",
stime: new Date()
}
]
}
})
</script>
</body>
</html>

详细源码地址

Vue 使用过滤器

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

1
2
3
4
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

Element 使用过滤器

在Vue中,使用过滤器通过在v-for遍历变量之后加管道符,但是在ele中,使用的是prop绑定属性的,所以需要在添加一个template 标签,然后在里面使用双花括号插值

1
2
3
<el-table-column prop="stime" label="时间">
<template slot-scope="scope">{{ scope.row.stime | dateFormat }}</template>
</el-table-column>

注意,stime要与你的定义的属性对应,dateFormat指的是过滤器。

0%