Element UI的table中使用过滤器

目录

      • 创建基本文件
      • Vue 使用过滤器
      • Element 使用过滤器

点击进入 :https://donlex.cn/archives/5def7cdc.html

创建基本文件

html 文件中引入css和js文件,参考网站的教程,使用相应的标签,这里做了一个简单的带有查询功能的表格。
效果如下:
Element UI的table中使用过滤器_第1张图片

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

实现代码:


<html>
	<head>
		<title>vue-test2title>
		
		<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-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>
					
					<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指的是过滤器。

你可能感兴趣的:(Vue,Vue,Element,UI)