设置默认查询条件反应卡顿,无法再次手动更改

[snowdreams1006]

例如系统工具>本地存储管理,设置默认查询条件会导致el-input无法再次输入,<date-range-picker延迟选择等问题,请问应该如何设置默认值?

问题截图:

复现流程:

1. 找到 src\views\tools\storage\local\index.vue文件中的搜索框区域,如下:

<div v-if="crud.props.searchToggle">
  <!-- 搜索 -->
  <el-input v-model="query.blurry" clearable size="small" placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
  <date-range-picker v-model="query.createTime" class="date-item" />
  <rrOperation />
</div>

2. 在CRUD.HOOK.beforeRefresh钩子函数中设置默认查询条件,如下:

注意: 如果在created生命周期内不仅不会立即生效也还是会出现同样问题;

  // 钩子：在获取表格数据之前执行，false 则代表不获取数据
  [CRUD.HOOK.beforeRefresh]() {
    // 默认今天
    if (!this.query.createTime) {
      let startTime = new Date(new Date().setHours(0, 0, 0))
      let endTime = new Date(new Date().setHours(23, 59, 59))
      startTime = startTime.strftime('%Y-%m-%d %H:%M:%S')
      endTime = endTime.strftime('%Y-%m-%d %H:%M:%S')
      this.query.createTime = [startTime, endTime]
    }
    if (!this.query.blurry) {
      this.query.blurry = 'bestsellers'
    }
    return true
  },

3. 搜索框无法清除内容也不能输入内容,日期选择框选择后没有反应,再次点击查询才出现;

[RandolphChin]

设置默认查询条件,应该在封装的 CRUD 方法中参数 query 对象中设置

cruds() {
    return CRUD(
         // 其他参数
         { query: { createTime: defaultCreateTime ,  blurry:  'bestsellers' } 
    }）
}

// createTime 的默认值你可以在一个js 中写一个方法返回这个默认创建时间，再引入这个js文件
// 示例
 function defaultCreateTime () {
      let startTime = new Date(new Date().setHours(0, 0, 0))
      let endTime = new Date(new Date().setHours(23, 59, 59))
      startTime = startTime.strftime('%Y-%m-%d %H:%M:%S')
      endTime = endTime.strftime('%Y-%m-%d %H:%M:%S')
      const arr = [startTime, endTime]
      return arr
}

export default defaultCreateTime 

这样就能解决你 “搜索框无法清除内容也不能输入内容,日期选择框选择后没有反应,再次点击查询才出现”

[snowdreams1006]

设置默认查询条件,应该在封装的 CRUD 方法中参数 query 对象中设置

cruds() {
    return CRUD(
         // 其他参数
         { query: { createTime: defaultCreateTime ,  blurry:  'bestsellers' } 
    }）
}

// createTime 的默认值你可以在一个js 中写一个方法返回这个默认创建时间，再引入这个js文件
// 示例
 function defaultCreateTime () {
      let startTime = new Date(new Date().setHours(0, 0, 0))
      let endTime = new Date(new Date().setHours(23, 59, 59))
      startTime = startTime.strftime('%Y-%m-%d %H:%M:%S')
      endTime = endTime.strftime('%Y-%m-%d %H:%M:%S')
      const arr = [startTime, endTime]
      return arr
}

export default defaultCreateTime 

这样就能解决你 “搜索框无法清除内容也不能输入内容,日期选择框选择后没有反应,再次点击查询才出现”

感谢,亲测可用,是一种解决办法!