HUI-VUE-Pro

# PageSearch 搜索栏

# 基础用法

Title Title Title Title
基础用法
<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content>
    <h-page-search ref="search" :model="search">
      <h-page-search-item label="Title" prop="title1">
        <el-input v-model="search.title1" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title2">
        <el-input v-model="search.title2" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title3">
        <el-input v-model="search.title3" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title4">
        <el-input v-model="search.title4" placeholder="Information" />
      </h-page-search-item>
      <template slot="pageSearchAction">
        <el-button type="primary">Search</el-button>
        <el-button @click="handleReset">Reset</el-button>
      </template>
    </h-page-search>
  </h-page-content>
</h-page-container>
<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title'],
        search: {
          title1: '',
          title2: '',
          title3: '',
          title4: ''
        }
      }
    },
    methods: {
      handleReset() {
        this.$refs.search.getForm().resetFields();
      }
    }
  }
</script>

# 高低频搜索

Title Title Title Title
高低频搜索
<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content>
    <h-page-search ref="search" :model="search">
      <h-page-search-item label="Title" prop="title1">
        <el-input v-model="search.title1" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title2">
        <el-input v-model="search.title2" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title3" :show="false">
        <el-input v-model="search.title3" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title4" :show="false">
        <el-input v-model="search.title4" placeholder="Information" />
      </h-page-search-item>
      <template slot="pageSearchAction">
        <el-button type="primary">Search</el-button>
        <el-button @click="handleReset">Reset</el-button>
      </template>
    </h-page-search>
  </h-page-content>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title'],
        search: {
          title1: '',
          title2: '',
          title3: '',
          title4: ''
        }
      }
    },
    methods: {
      handleReset() {
        this.$refs.search.getForm().resetFields();
      }
    }
  }
</script>

# 默认收起

Title Title Title Title
默认收起
<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content>
    <h-page-action search-icon />
    <h-page-search ref="search" :model="search">
      <h-page-search-item label="Title" prop="title1">
        <el-input v-model="search.title1" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title2">
        <el-input v-model="search.title2" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title3">
        <el-input v-model="search.title3" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title4">
        <el-input v-model="search.title4" placeholder="Information" />
      </h-page-search-item>
      <template slot="pageSearchAction">
        <el-button type="primary">Search</el-button>
        <el-button @click="handleReset">Reset</el-button>
      </template>
    </h-page-search>
  </h-page-content>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title'],
        search: {
          title1: '',
          title2: '',
          title3: '',
          title4: ''
        }
      }
    },
    methods: {
      handleReset() {
        this.$refs.search.getForm().resetFields();
      }
    }
  }
</script>

# 可配置断点

Title Title Title Title
可配置断点
<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content>
    <h-page-search ref="search" :model="search" :options="options">
      <h-page-search-item label="Title" prop="title1">
        <el-input v-model="search.title1" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title2">
        <el-input v-model="search.title2" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title3">
        <el-input v-model="search.title3" placeholder="Information" />
      </h-page-search-item>
      <h-page-search-item label="Title" prop="title4">
        <el-input v-model="search.title4" placeholder="Information" />
      </h-page-search-item>
      <template slot="pageSearchAction">
        <el-button type="primary">Search</el-button>
        <el-button @click="handleReset">Reset</el-button>
      </template>
    </h-page-search>
  </h-page-content>
</h-page-container>
<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title'],
        search: {
          title1: '',
          title2: '',
          title3: '',
          title4: ''
        },
        options: {
          xl: 1200,
          lg: 920,
          md: 700,
          sm: 400
        }
      }
    },
    methods: {
      handleReset() {
        this.$refs.search.getForm().resetFields();
      }
    }
  }
</script>

# API

# PageSearch Attributes

参数 说明 类型 可选值 默认值
model 表单数据对象 Object - -
rules 表单验证规则 Object - -
label-position 1.2.2+ 表单域标签的位置，值为 left 或 right 时，需要设置 label-width String right/left/top top
label-width 1.2.2+ 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 String - -

# PageSearch Methods

方法名 说明 参数
getForm 获取搜索栏使用的表单控件（HUI） -
resetFields 对整个表单进行重置，清空所有字段并移除校验结果 -
resetStatus 1.3.0+ 重置搜索栏显隐性状态 -
reset 1.3.0+ 重置搜索栏 -
resize 重新计算搜索项和操作项所占栅格数 -

# PageSearch Slot

name 说明
pageSearchAction 搜索栏操作按钮插槽

# PageSearch Options

参数 说明 类型 可选值 默认值
xl 一行 6 个搜索项的断点 Number - 1408
lg 一行 4 个搜索项的断点 Number - 935
md 一行 3 个搜索项的断点 Number - 708
sm 一行 2 个搜索项的断点 Number - 472

# PageSearch Events

事件 说明 回调参数
collapse 显示/隐藏高低频搜索项的回调 共一个参数，是否显示高低频搜索项

# PageSearchItem Attributes

参数 说明 类型 可选值 默认值
prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 传入 Form 组件的 model 中的字段 - -
rules 表单验证规则 Object - -
label 标签文本 String - -
required 是否必填 String - -
required-right 是否必填，且星号显示在文字右侧 String - -
label-width 1.2.2+ 表单域标签的的宽度，例如 '50px'，可覆盖父控件的 label-width String - -
show 设为 false 会开启高低频过滤 Boolean - true
hidden 菜单项是否隐藏，取代 v-if 和 v-show 实现隐藏功能 Boolean - false

← PageTable 表格内容 →