关于avue-crud这个组件库之前我说过个大概,它是将elementUI的二次封装,今天主要说一下它表格用法里面的自带搜索栏的日期搜索:
在这里插入图片描述

// 只说几个我用到的属性
{
    label: '日期',
    prop: 'uploadDate',
    type:'datetime',
    dateDefault: true,
    searchValue: [_this.currentDate1, _this.currentDate2],      // 这是我获取的默认的显示日期,我这里是['2020-08-04', '2020-09-22']
    format: 'yyyy-MM-dd',                  // 这是组件展示的日期格式
    valueFormat: 'yyyy-MM-dd',        // 这是组件value值的格式
    searchSpan:12,
    searchRange:true,                      
    search:true,
    searchClearable: false,
},

然后绑上搜索事件,它有回调参数:

<avue-crud ref="crud"
           :page="page"
           :data="tableData"
           :table-loading="tableLoading"
           :option="logTbale"
           @size-change="sizeChange"
           @current-change="currentChange"
           @search-change="searchChange"
           @refresh-change="refreshChange">
</avue-crud>


searchChange(params,done) {
      console.log(params)   // 这就是获取额搜索栏的日期
      done();
      //  this.getPage(this.page)
},
Logo

前往低代码交流专区

更多推荐