码迷,mamicode.com
首页 > 其他好文 > 详细

Vue ElementUI 纯前端实现下拉过滤

时间:2020-06-16 15:25:53      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:title   ring   data   new   hang   mode   dex   ==   key   

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

 

Vue ElementUI 纯前端实现下拉过滤

标签:title   ring   data   new   hang   mode   dex   ==   key   

原文地址:https://www.cnblogs.com/qfcddl/p/13140798.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!