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