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/>

 

posted @ 2020-06-16 14:33  皮一皮很开心  阅读(1245)  评论(0编辑  收藏  举报