SearchPanel 搜索面板

agel-search-panel 组件是基于 agel-form-inline 组件的二次封装组件。

使用

基于 agel-form-inline 的基础, 为其添加了额外的属性，一般常用于列表搜索等，点击查询时也会对表单进行验证。

点击查看代码

<template>
  <div class="demo">
    <agel-search-panel :data="query.data" :items="query.items" panel-position="right" @search="getList">
      <el-button>新增</el-button>
      <el-button>导入</el-button>
      <template v-slot:address>
        <el-input v-model="query.data.address" style="width:100px"></el-input>
      </template>
    </agel-search-panel>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top:20px" height="200px" border>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      query: {
        data: { address: "agel-form" },
        items: [
          { prop: "name", label: "姓名", style: "width:100px" },
          { prop: "address", label: "地址", slot: true, required: true },
        ],
      },
      tableData: [],
      loading: false,
    };
  },
  methods: {
    getList() {
      this.loading = true;
      setTimeout(() => {
        this.tableData = [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ];
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

折叠

若查询条件特别得多，可开启 collapseButton 折叠按钮, 设置 form.collapseAlive 数组指定搜索项进行保留，也可以直接设置 item.collapseAlive 保留，若都为空则会默认保留前三个搜索项。

点击查看代码

<template>
  <agel-search-panel class="demo border" :data="data" :items="items" collapseButton collapse :collapseAlive="collapseAlive"> </agel-search-panel>
</template>
 
<script>
export default {
  data() {
    return {
      collapseAlive: ["name1"], // 不被折叠的 prop
      data: {},
      items: [
        { prop: "name1", label: "姓名1" },
        { prop: "name2", label: "姓名2", collapseAlive: true },
        { prop: "name3", label: "姓名3" },
        { prop: "name4", label: "姓名4" },
        { prop: "name5", label: "姓名5" },
        { prop: "name6", label: "姓名6" },
        { prop: "name7", label: "姓名7" },
      ],
    };
  },
  methods: {},
};
</script>

全局配置

组件提供了基础按钮的 render，你可以在全局配置里定义按钮样式风格。该组件是依赖于 agel-form, 因此全局配置也是配置在 agel-form 中。

import agelForm from "agel-form";
import { agelSearchPanel } from "agel-form";

const formConfig = {
  "agel-search-panel": {
    searchButtonRender: function ({ h }) {
      return h("el-button",{ props: { icon: "el-icon-search", type: "primary" } },"查询");
    },
    resetButtonRender: function ({ h }) {
      return h("el-button",{ props: { icon: "el-icon-refresh-right", type: "primary" } },"重置");
    },
    collapseButtonRender = function ({ h, collapse }){
       return h("el-button",null, collapse ? '展开' : '收起');
    }
  }
}

Vue.use(agelForm, formConfig);
Vue.use(agelSearchPanel);

SearchPanel Attributes

属性	类型	默认值	说明
items	Object/Array	[]	表单配置项
data	Object/Array	-	表单数据
panelPosition	String	left	布局方式，可选 left right
searchButton	Boolean	true	是否显示搜索按钮
resetButton	Boolean	true	是否显示初始化按钮
collapseButton	Boolean	false	是否显示折叠按钮
collapse	Boolean	true	默认折叠状态
collapseAlive	Array[prop]	-	折叠情况下保留的搜索条件 prop
......	......	......	elForm 属性 (opens new window)

SearchPanel Slots

属性	说明
...	表单项的 prop 具名插槽
default	按钮插槽
prepend	prepend 插槽
append	append 插槽

SearchPanel Events

属性	参数	说明
search	-	点击查询或重置按钮触发
reset	-	点击重置按钮触发
collapse	(collapse)	点击折叠按钮触发