el-table中模糊查询，DatePicker日期筛选

最新推荐文章于 2023-12-12 08:15:00 发布

周半瓶儿

最新推荐文章于 2023-12-12 08:15:00 发布

阅读量969

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/zcsweet74/article/details/122599597

版权

本文介绍了如何在Vue.js项目中使用ElementUI组件库的el-table进行模糊查询，并结合DatePicker实现日期筛选功能，通过示例代码详细展示了具体的实现步骤和方法。

摘要由CSDN通过智能技术生成

代码如下

<template>
    <div class="SHOUSHUOComponent" v-show="this.$store.getters._getDefaultSHOUSHUOVisible">
        <div class="SHOUSHUOComponent-header">
            <span id="kongge" style="font-size: 16px; text-indent: 8px"> 影像搜索</span>
            <i class="el-icon-close" @click="closeSHOUSHUOPannel"></i>
        </div>

        <div class="dormitory">
            <div class="searchWord">
                <el-input
                    v-model="search"
                    clearable
                    style="display: inline-block; top: 4px; width: 180px; left: 8px"
                    placeholder="请输入搜索内容"
                >
                </el-input>
            </div>
            <el-date-picker
                class="rili"
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="changedate($event)"
            >
            </el-date-picker>
            <!-- <el-button class="guolvqi" @click="clearFilter">清除过滤器</el-button> -->
            <!-- // 遍历表格 -->
            <div class="dormitoryData">
                <el-table
                    border
                    ref="dormitoryTable"
                    :data="tables"
                    height="415"
                    tooltip-effect="dark"
                    stripe
                    style="width: 590px; top: 12px; left: 8px"
                >
                    <el-table-column type="selection" width="45"></el-table-column>
                    <el-table-column label="序号" type="index" width="55"></el-table-column>
                    <el-table-column label="图名" prop="name" width="80"> </el-table-column>
                    <el-table-column label="图号" prop="number" width="120"> </el-table-column>
                    <el-table-column label="日期" prop="date" width="120" sortable> </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150" hight="455">
                        <template slot-scope="scope">
                            <a :href="scope.row.downloadRoute" download=""
                                ><el-button size="mini" @click="download(scope.row)">下载</el-button>
                            </a>
                            <a>&nbsp;&nbsp;&nbsp;</a>
                            <a
                                ><el-button size="mini" type="danger" @click="handleClick(scope.row)">加载</el-button>
                            </a></template
                        >
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { loadModules } from 'esri-loader';
import config from './config';
export default {
    data() {
        return {
            restaurants: [],
            state: '',
            timeout: null,
            Times: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: '全部',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1