H5W3
当前位置:H5W3 > 其他技术问题 > 正文

如何用下拉选择器过滤表格?

想直接用下拉选择器实现表格的筛选,不是使用elementUI的表头筛选,请问该怎么实现??

clipboard.png

<template>
    <div class="child-page-toolbar">
        <div class="line"></div>

        <span slot="title">状态</span>
        <el-select v-model="selectState" placeholder="请选择工单状态" @change="StateChange">
            <el-option
                    v-for="item in state"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>

        <span slot="title">分类</span>
        <el-select v-model="selectSort" placeholder="请选择工单类别" @change="SortChange">
            <el-option
                    v-for="item in sort"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>

        <el-date-picker
                v-model="selectDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions" @change="dateChange">
        </el-date-picker>



        <el-table :data="tableData"
                  style="width: 100%"
                  :default-sort = "{prop: 'submitTime', order: 'ascending'}">
            <el-table-column
                    prop="orderNum"
                    label="工单号"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="orderSort"
                    label="分类"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="orderTitle"
                    label="标题">
            </el-table-column>
            <el-table-column
                    prop="orderDescribe"
                    label="描述"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="orderState"
                    label="状态"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="submitTime"
                    label="提交时间"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="endTime"
                    label="截止时间"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleDetail(scope.$index, scope.row)" type="text" size="small">详情</el-button>
                    <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                state: [{
                    value: '0',
                    label: '全部工单'
                }, {
                    value: '1',
                    label: '未处理'
                }, {
                    value: '2',
                    label: '处理中'
                }, {
                    value: '3',
                    label: '已处理'
                }, {
                    value: '4',
                    label: '已结单'
                }],
                sort: [{
                    value: '0',
                    label: '全部工单'
                }, {
                    value: '1',
                    label: '文案类'
                }, {
                    value: '2',
                    label: '设计类'
                }, {
                    value: '3',
                    label: '开发类'
                }, {
                    value: '4',
                    label: '采购类'
                }, {
                    value: '5',
                    label: '其他类'
                }],
                selectState: '',
                selectSort:'',


                //日期选择器
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                selectDate: '',

                //表格数据
                tableData: [{
                    orderNum: '1',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.01.10 02:33',
                    endTime:'2017.02.10 02:33'
                }, {
                    orderNum: '2',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.01.11 02:33',
                    endTime:'2017.02.09 02:33'
                }, {
                    orderNum: '3',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.01.12 02:33',
                    endTime:'2017.02.08 02:33'
                }, {
                    orderNum: '4',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.01.09 02:33',
                    endTime:'2017.02.07 02:33'
                }, {
                    orderNum: '5',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.01.08 02:33',
                    endTime:'2017.02.06 02:33'
                }, {
                    orderNum: '6',
                    orderSort: '开发',
                    orderTitle: 'BUG测试',
                    orderDescribe:'BUG测试描述',
                    orderState:'处理中',
                    submitTime:'2017.01.15 02:33',
                    endTime:'2017.02.05 02:33'
                }]
            }
        },
        filter:{

        },
        methods: {
            StateChange(value) {
                console.log(value);
                if(value === 2){

                }
            },
            SortChange(value){
                console.log(value);
            },

            dateChange(value){
                console.log(value);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(row) {
                console.log(row);
            },
            handleDetail(index,row){
                location.href = "/personal/detail"
            },
            handleEdit(index,row){
                location.href = "/createOrder/new"
            },
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

回答:

vue的数据都是绑定的,数据变了展示的内容就跟着变了,下拉菜单有一个change事件,可以根据选中的值去改变下面表格中绑定的数据内容,数据一旦变化,内容会自动更新,就是这思路,若不懂,可评论告诉我,我给你代码实现一下,现在不写是因为那么多内容,难写呀^_^ ^_^

回答:

1.筛选条件的change事件对应的事件只要写一个方法就可以了,如changeSelect,因为过滤不止要兼顾当前选择的过滤条件,还要兼顾其他选择的选项,如现在选了分类,但之前选过的状态也得保留。
2.一般如果数据量比较大的话,筛选条件是要作为参数传给后台,后台过滤之后返回给前台渲染即可,毕竟服务器的处理速度比浏览器的处理速度快的不止一丢丢
3.假如需要前台渲染,拿到所有数据以后,在changeSelect方法中,首先获取所有过滤项的值,也就是v-model所绑定的值,举个例子,过滤了state为处理中且分类是开发的话,那就在表格数据渲染的时候(假如从后台拿到的数据数组为res),判断res[i].state==this.selectState&&res[i].sort==this.selectSort的话将数据放到表格数据中进行渲染,否则不渲染。
建议过滤项让后台提供筛参数,使用第二种方式。

回答:

@loje 你数据是来自后端api吧,问后端传什么参数就可以了,change后用axios发ajax请求啊

本文地址:H5W3 » 如何用下拉选择器过滤表格?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址