Element布局实现条件过滤查询的方法

    
        
            
                
                    
                        
                            
                            
                        
                        
                            
                        
                    
                
                
                    
                        
                            
                                
                          
                        
                        
                            
                        
                    
                
                
                    
                        
                            
                                
                            
                        
                        
                            
                                
                            
                        
                    
                
            
            
                
                    搜索
                    清空
                
            
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                        
                            已知晓
                        
                    
                
                
                
            
        
    

2.前端JS

    new Vue({
        el: '#app',
        data: {
            searchDayRange: '',
            searchAlarmLevel: '全部',
            searchDeviceType: '',
            searchIp: '',
            start: '',
            end: '',
            loading: false,
            searchContent: '',
            searchStatus: '全部',
            deviceType: [],
            alarmData: [],
            pageSize: 20,
            totalNum: 0,
            currentPage: 1,
            alarmType:[
                {
                    "label":"全部",
                    "value":"全部"
                },
                    {
                    "label":"轻微",
                    "value":"轻微"
                },
                    {
                    "label":"一般",
                    "value":"一般"
                },
                    {
                    "label":"严重",
                    "value":"严重"
                }
            ],
            StatusData: [
                {
                    "label":"全部",
                    "value":"全部"
                },
                    {
                    "label":"已恢复",
                    "value":"已恢复"
                },
                    {
                    "label":"未恢复",
                    "value":"未恢复"
                }
            ]
        },
        mounted() {
            axios.get(site_url + "device_type/").then(res => {
                if (res.data.result) {
                    this.deviceType = res.data.data
                } else {
                    this.$message.error('请求失败')
                }
            }, 'json');
            // 页面加载就获取所有模板
            this.init()
        },
        methods: {
            init() {
                params = {};
                this.search(params)
            },
            getSearch() {
                if(typeof(this.searchDayRange) == "undefined" || this.searchDayRange == null || this.searchDayRange == ""){
                    this.start = "";
                    this.end = ""
                } else {
                    this.start = this.searchDayRange[0];
                    this.end = this.searchDayRange[1]
                }
                params = {
                    start: this.start,
                    end: this.end,
                    alarm_level: this.searchAlarmLevel,
                    device_type: this.searchDeviceType,
                    search_ip: this.searchIp,
                    query_str: this.searchContent,
                    status: this.searchStatus
                };
                this.search(params)
            },
            search(params) {
                this.loading = true;
                axios({
                    methods: 'get',
                    url: site_url + 'alarm/',
                    params: params
                })
                .then(res => {
                    if(res.data.result){
                        this.loading = false;
                        this.alarmData = res.data.data.data;
                        this.totalNum = res.data.data.count;
                    } else {
                        this.$message.error('请求失败')
                    }
                }).catch(error => {
                    this.loading = false;
                    this.$message.error('请求失败')
                });
            },
            clearData() {
                this.searchDayRange = [];
                this.searchAlarmLevel = '全部';
                this.searchDeviceType = '';
                this.searchIp = '';
                this.searchContent = '';
                this.searchStatus = '全部';
            },
            handleSizeChange(val) {
                this.pageSize = val;
                params = {
                    start: this.searchDayRange[0],
                    end: this.searchDayRange[1],
                    alarm_level: this.searchAlarmLevel,
                    device_type: this.searchDeviceType,
                    search_ip: this.searchIp,
                    query_str: this.searchContent,
                    status: this.searchStatus,
                    page: this.currentPage,
                    page_size: this.pageSize
                };
                this.search(params)
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                params = {
                    start: this.searchDayRange[0],
                    end: this.searchDayRange[1],
                    alarm_level: this.searchAlarmLevel,
                    device_type: this.searchDeviceType,
                    search_ip: this.searchIp,
                    query_str: this.searchContent,
                    status: this.searchStatus,
                    page: this.currentPage,
                    page_size: this.pageSize
                };
                this.search(params)
            }
        }
    })

实现效果

感谢各位的阅读，以上就是“Element布局实现条件过滤查询的方法”的内容了，经过本文的学习后，相信大家对Element布局实现条件过滤查询的方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！