PmSearch

高级查询组件

默认仅显示文本输入框查询, 点击高级按钮后显示其他查询条件.

基础用法

{ "userName": null, "status": null, "time": null, "limit": 10, "offset": 1 }

<pm-search style="width:500px;" :query.sync="query" defaultProp="userName" @search="search" placeholder="请输入用户名称搜索">
  <template slot="body">
      <el-form-item label="用户名称" prop="userName">
        <el-input v-model="query.userName" clearable />
      </el-form-item>
      <el-form-item label="用户状态" prop="status">
        <el-select
          v-model="query.status"
        >
          <el-option value="1" label="正常"></el-option>
          <el-option value="2" label="注销"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间" prop="time">
        <el-date-picker
          v-model="query.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-DD"
        >
        </el-date-picker>
      </el-form-item>
  </template>
</pm-search>
<p>{{query}}</p>
<script>
  export default {
    data(){
      return {
        query:{
          userName:null,
          status: null,
          time: null,
          limit:10,
          offset:1,
        }
      }
    },
    methods:{
      search(){
        console.log('search',this.query)
      }
    }
  }
</script>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	可选值	默认值
query	查询条件对象	Object	-	{}
defaultProp	默认输入框绑定的属性	string	-
placeholder	输入框占位文本	string	-

Events

参数	说明	类型	可选值	默认值
search	查询回调方法	Function	-	-