搜索
                    清空
                
            
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                        
                            已知曉
                        
                    
                
                
                
            
        
    

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)
            }
        }
    })

實現(xiàn)效果

感謝各位的閱讀，以上就是“Element布局實現(xiàn)條件過濾查詢的方法”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Element布局實現(xiàn)條件過濾查詢的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！