點擊進入 ：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指的是過濾器。