版权声明：本文为博主原创文章，转载请联系本人，未经博主允许不得转载 https://blog.csdn.net/stormdony/article/details/89151667
点击进入 ：https://donlex.cn/archives/5def7cdc.html
创建基本文件
在html 文件中引入css和js文件，参考网站的教程，使用相应的标签，这里做了一个简单的带有查询功能的表格。
效果如下：
上面的Gif中，在表格中的时间一列，使用了过滤器，将new Date()得到的时间转化为yyyy-mm-dd。
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>vue-test2</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<h2>信息管理</h2>
<el-form :inline="true">
<el-form-item label="搜索">
<el-input v-model.trim="search"></el-input>
</el-form-item>
<!-- <el-button type="primary" icon="el-icon-search" @click="handlesearch"></el-button> -->
</el-form>
<el-form :inline="true">
<el-form-item label="姓名">
<el-input v-model.trim="name" type="text" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="age" type="number" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-button type="primary" @click="onclick"><i class="el-icon-edit"></i>创建</el-button>
</el-form>
<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>
</div>
<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()
}
]
},
methods: {
onclick: function() {
if (this.name.length != 0 && this.age > 0) {
this.tableData.push({
name: this.name,
age: this.age,
stime: new Date(),
})
}
},
handledelete: function(index) {
this.tableData.splice(index, 1)
},
handlesearch: function() { //第30行调用了该方法
return this.tableData.filter(item => {
// filter()对象遍历,true 返回对象参数值,如果多条数据,自动使用数组拼接
if (item.name.includes(this.search)) {
////字符串索引有关键字值,返回true
return item
}
})
}
}
})
</script>
</body>
</html>
Vue 使用过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
Element 使用过滤器
在Vue中，使用过滤器通过在v-for遍历变量之后加管道符，但是在ele中，使用的是prop绑定属性的，所以需要在添加一个template 标签，然后在里面使用双花括号插值。
<el-table-column prop="stime" label="时间">
<template slot-scope="scope">{{ scope.row.stime | dateFormat }}</template>
</el-table-column>
注意，stime要与你的定义的属性对应，dateFormat指的是过滤器。