Vue ElementUI 纯前端实现下拉过滤
<template> <div> <el-form-item label="类型"> <el-select v-model="ProjectStatus" clearable style="width:150px" @change="filter"> <el-option v-for="item in ProjectStatusOptions" :key="item.value" :label="item.title" :value="item.value" ></el-option> </el-select> </el-form-item> <div/> <template/>
<script> export default { data() { return{ new_arr2: [], ProjectStatusOptions: [ { title: '全部', value: '-1' }, { title: '待启动', value: '0' }, { title: '待上传', value: '1' }, { title: '已关闭', value: '2' }, { title: '已结束', value: '3' } ] } }, created() { this.getlist() }, methods: { getlist() { // 在这里给new_arr2赋值 // this.new_arr2 }, // 状态过滤方法 filterimplement(item) { this.filterimplementindex = item // console.log(item) let new_arr1 = JSON.parse(JSON.stringify(this.new_arr2)) // 修改数组 if (item === -1) { this.tableData = this.new_arr2 } else { const newfilterlist = [] for (const i in new_arr1) { if (new_arr1[i].TaskStatus === item) { newfilterlist.push(new_arr1[i]) } } new_arr1 = newfilterlist } if (item === '') { this.tableData = this.new_arr2 } this.tableData = new_arr1 }, // 状态过滤 filter() { switch (this.ProjectStatus) { // 全部 case '-1': this.filterimplement(-1) break // 未启动 case '0': this.filterimplement(0) break // 待上传 case '1': this.filterimplement(1) break // 已关闭 case '2': this.filterimplement(2) break // 已结束 case '3': this.filterimplement(3) break default: this.filterimplement(-1) break } } } } <script/>
只是热爱开发的小渣渣!!