根据时间段查询以及下拉表格动态渲染的功能实现

Vue.js项目中使用DateTimePicker进行日期范围查询与下拉框动态渲染

最新推荐文章于 2023-06-17 12:05:27 发布

原创最新推荐文章于 2023-06-17 12:05:27 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文展示了在Vue.js应用中，如何利用ElementUI的DateTimePicker组件进行日期时间选择，实现从00:00:00到23:59:59的默认查询范围。同时，通过axios发送POST请求进行数据检索。此外，还详细说明了如何动态渲染下拉框选项，当选中某个值时，更新关联的下拉框数据。

这里的时间是设置默认从当天00：00：00开始，到所查询结束的23：59：59结束
代码是用element中DateTimePicker 日期时间选择器

搜索按钮以及时间选择框：

 <el-col :span="4">
                    <span class="demonstration"> <el-date-picker v-model="value1" type="datetimerange" style="width:200px ;"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker></span>
                </el-col>
                <el-col :span="3">
                    <el-button type="info" style="background-color: #3F3F65;" @click="getdata()"
                        v-model="input">查询</el-button>
                </el-col>

methods部分：

   getdata() {
            console.log(this.value1);
            let date1 = ""//起始日期
            let date2 = ""//截止日期
            if (this.value1 != "") {
                console.log("in");
                date1 = String(this.msToDate(this.value1[0]));
                date2 = String(this.msToDate(this.value1[1]));
            }

            this.$axios.post('consumable/warehousing/page', { "limit": this.pageSize, "page": this.currentPage, cname: this.input, cdepositTimeBegin: date1, cdepositTimEnd: date2 }
            ).then((r) => {
                this.tableData = r.data.data;
                this.total = r.data.count
            });
        },
        //转时间格式 
        msToDate(msec) {
            let res = this.date(msec)
            let datetime = new Date(res);
            let year = datetime.getFullYear();
            let month = datetime.getMonth();
            let date = datetime.getDate();
            let hour = datetime.getHours();
            let minute = datetime.getMinutes();
            let second = datetime.getSeconds();
            let result1 = year +
                '-' +
                ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                '-' +
                ((date + 1) < 10 ? '0' + date : date) +
                ' ' +
                ((hour + 1) < 10 ? '0' + hour : hour) +
                ':' +
                ((minute + 1) < 10 ? '0' + minute : minute) +
                ':' +
                ((second + 1) < 10 ? '0' + second : second);

            let result2 = year +
                '-' +
                ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                '-' +
                ((date + 1) < 10 ? '0' + date : date);
            let result = {
                cdepositTimeBegin: result1,
                cdepositTimEnd: result2
            };

            return result1;

        }

这样，通过选择起始日期和结束日期，点击搜索，就能实现对相应时间段的一个查询。

下拉框动态渲染实现：

下拉框样式：

 <el-form-item label="领用人姓名" :label-width="formLabelWidth" prop="name">
                    <el-select v-model="addForm.name" placeholder="领用人姓名" @change="changes">
                        <el-option v-for="item in selectData" :key="item.value" :label="item.name
                        " :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>

method实现：

 changes(temp) {
            console.log(`当前选中${temp}`);
            this.selectData.filter((item) => {
                if (item.name == temp) {
                    this.addForm.departmentName = item.departmentName
                    console.log(this.addForm, "给了");
                    return true
                }
            })
        },

这样，只要前面给的数据进行了更新，下拉框里面的数据就会跟着更新。