javascript - vue 怎么筛选 过滤数据？用的vue element后台

问题描述

问 题

我用的是vue-Element后台框架， 想生成一个表格， 这个表格要有 搜索功能，根据ID/时间/等等，也就是筛选过数据， 我知道用 计算属性， 过滤原始数据， 然后就自动渲染页面了，

这是代码。。。

头部代码

<el-form-item>
                <el-input v-model="formInline.userId" placeholder="用户ID" :filter-method="filterTag" ></el-input>
                
            </el-form-item>
            <el-form-item>
                <el-input v-model="formInline.userName" placeholder="昵称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="formInline.userPhone" placeholder="手机号" type="tel"></el-input>
            </el-form-item>
            <el-form-item>
                 <div class="block">
                    <span class="demonstration">注册时间</span>
                    <el-date-picker
                    v-model="regTime"
                    type="datetimerange"
                    placeholder="选择时间范围"
                    style="width:350px">
                    </el-date-picker>
                </div>                    
            </el-form-item>
            <el-form-item>
                 <div class="block">
                    <span class="demonstration">登陆时间</span>
                    <el-date-picker
                    v-model="logTime"
                    type="datetimerange"
                    placeholder="选择时间范围"
                    style="width:350px">
                    </el-date-picker>
                </div>                    
            </el-form-item>
            <el-form-item>
                <el-button @click="ff"> 查询{{vfilter}}</el-button>
            </el-form-item>
                

## table ##

<template>
            <el-table :data="tableData" highlight-current-row :border="true" :filter-multiple= "true" style="width: 100%;">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="userId" label="用户id" :filters="[{ text: formInline.userId, value: 1000 }, { text: '公司', value: '公司' }]" :filter-method="filterTag" sortable inline-template>
                     <el-tag :type="row.userId === 1000 ? 'primary' : 'success'" close-transition>{{row.userId}}</el-tag>
                </el-table-column>
                <el-table-column prop="userName" label="昵称"  sortable>
                </el-table-column>
                <el-table-column prop="userPhone" label="手机号码"  sortable>
                </el-table-column>
                <el-table-column prop="userEmail" label="邮箱"  sortable>
                </el-table-column>
                <el-table-column prop="QQ" label="QQ"  sortable>
                </el-table-column>
                <el-table-column prop="weixin" label="微信"  sortable>
                </el-table-column>
                <el-table-column prop="weibo" label="微博"  sortable>
                </el-table-column>
                <el-table-column prop="userSex" label="性别" :formatter="formatSex"  sortable>
                </el-table-column>
                <el-table-column prop="userBirth" label="生日"  sortable>
                </el-table-column>
                <el-table-column prop="userAddr" label="地址"  sortable>
                </el-table-column>
                <el-table-column prop="userFrom" label="来自"  sortable>
                </el-table-column>
                <el-table-column prop="logTime" label="登陆时间"  sortable>
                </el-table-column>
                <el-table-column prop="regTime" label="注册时间"  sortable>
                </el-table-column>

            </el-table>
        </template>

求各位大神给点思路。。。

解决方案

table 绑定数据，输入查询条件并点击查询按钮后调用后台接口按条件查询，返回数据后更新table所绑定的数据值就可以了。
这里涉及几个关键问题
1、table 如何绑定数据，这个官方文档里有，而且有示例。
2、如何调用后台接口，并传递参数。可以使用 vue-resource 或者 axios。
3、后台如何接受参数并进行查询，然后返回数据。如果后台接口也是你写的，那这好说，算是很基础的问题。
4、接收接口返回数据后更新 table 绑定的数据。

这篇关于javascript - vue 怎么筛选 过滤数据？用的vue element后台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！