（二十九）VueCli3.0全栈——筛选功能

1、筛选功能

• 页面添加时间选择器，添加到添加按钮前面

<el-form :inline="true" ref="add_data" :model="search_data">
        <!-- 筛选 -->
        <el-form-item label="按照时间筛选">
            <el-date-picker
                v-model="search_data.startTime"
                type="datetime"
                placeholder="选择开始时间"
                >
            </el-date-picker>
            --
            <el-date-picker
                v-model="search_data.endTime"
                type="datetime"
                placeholder="选择结束时间"
                >
            </el-date-picker>
        </el-form-item>
        <!-- 筛选按钮 -->
        <el-form-item>
          <el-button type="primary" size="small" icon="search" @click="handleSearch()">筛选</el-button>
        </el-form-item>


        <!-- 添加按钮 -->
        <el-form-item class="btnRight">
          <el-button type="primary" size="small" icon="view" @click="handleAdd()">添加</el-button>
        </el-form-item>
      </el-form>

• 添加筛选的时间数据，在data里面

// 筛选
search_data:{
    startTime:"",
        endTime:""
},
filterTableData:[],

• 获取数据的时候也把filterTableData初始化

getProfile() {
      // 获取表格数据
      this.$axios
        .get("/api/profiles")
        .then(res => {
          this.allTableData = res.data;
          this.filterTableData=res.data;
            //   设置分页数据
            this.setPaginations();

        })
        .catch(err => console.log(err));
    }

• 筛选功能

handleSearch(){
    // 筛选
    if(!this.search_data.startTime || !this.search_data.endTime){
        this.$message({
            type:'waring',
            message:'请选择时间区间'
        });
        this.getProfile();
        return;
    }

    const sTime = this.search_data.startTime.getTime();
    const eTime = this.search_data.endTime.getTime();
    // 过滤数据
    this.allTableData = this.filterTableData.filter(item=>{
        let date = new Date(item.date);
        let time = date.getTime();
        return time >= sTime && time <= eTime;
    });
    // 分页数据
    this.setPaginations();

}