Prop: filterFields

• type: Array
• default: []

配置搜索栏搜索字段，一个数组项对应一个表单字段。支持传入 Object 和 JSX 。

配置属性

公共配置

以下为所有类型都共有的属性配置：

参数	必须	类型	说明
type	√	String	字段类型
model	√	String	提交时字段的 key 名
label	√	String	字段中文说明
disabled		Boolean	是否禁用
key		String	同 vue 组件的 :key 属性，若不设置会直接使用子项的 model 值
componentProps		Object	可传入各自组件自身的 props ，具体可查看 componentProps
componentEvents		Object	可传入各自组件自身的 events ，具体可查看 componentEvents
componentSlots		Object	可传入各自组件支持的 slots ，具体可查看 componentSlots
effect		Function	参数为 { vm, filterModel } 的方法，可用于配置简单的字段交互，具体可查看 effect

type 字段类型可选值

内置的可选字段类型有：

type	说明	对应 Element-UI 组件
label	文本标签	纯文本，无对应组件
text	文本字段	Text (opens new window)
number	数字输入	Number (opens new window)
select	单选	Select (opens new window)
multipleSelect	多选	MultipleSelect (opens new window)
date	日期选择	Date (opens new window)
dateRange	日期范围	DateRange (opens new window)
timeSelect	固定时间选项	TimeSelect (opens new window)
timePicker	任意时间	TimePicker (opens new window)
timePickerRange	时间范围	TimePickerRange (opens new window)
dateTime	日期时间	DateTime (opens new window)
dateTimeRange	日期时间范围	DateTimeRange (opens new window)
cascader	级联选项	Cascader (opens new window)

私有配置 trim

• type: Boolean

对于 text 字段，默认在失焦后会执行 trim 操作，传入 false 即可关闭该行为。

私有配置 options

• type: Array | Promise | () => Promise<options> | (done) => void
• default: []

对于 select , multipleSelect , cascader 字段，可通过 options 属性配置选项值：

select

支持属性和 optionAttributes (opens new window) 相同。

参数	说明	类型	可选值	默认值
value	选项的值	string/number/object	-	-
label	选项的标签	string/number	-	-
disabled	是否禁用	boolean	-	false

multipleSelect

与上面 select 相同，略。

cascader

支持属性和 Cascader - options (opens new window) 相同。

异步选项

有时需要从其他接口选项内容，可在 options 传入函数来进行异步填充，支持 2 种方式：

1. Promise：

{
  type: 'select',
  model: 'promiseOptions',
  label: 'promiseOptions',
  options() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([
          { label: '单选项 1', value: 1 },
          { label: '单选项 2', value: 2 },
          { label: '单选项 3', value: 3 }
        ])
      }, 3000)
    })
  }
}

2. 使用第一个参数 done(options) ：

{
  type: 'multipleSelect',
  model: 'asyncOptions',
  label: 'asyncOptions',
  options: done => {
    setTimeout(() => {
      done([
        { label: '多选项 1', value: 1 },
        { label: '多选项 2', value: 2 },
        { label: '多选项 3', value: 3 }
      ])
    }, 3000)
  }
}

componentSlots

• type: Object
• default: {}

该配置目前仅对于 text 类型字段有效，可通过添加组件支持的 slot 名 prepend append 为文本框添加前置或后置附加元素，支持 JSX：

{
  type: 'text',
  componentSlots: {
    prepend: '$',
    append: '$'
    // prepend: <strong>$</strong>,
    // append: <strong>$</strong>
  },
},

componentProps

• type: Object
• default: {}

除了上面封装的“公共配置”和“私有配置”，如果针对不同字段组件有不同的参数配置，可以查阅各自对应 Element-UI 组件支持的 props 后，使用 componentProps 来直接传入，例：

{
  type: 'text',
  model: 'datatext',
  componentProps: {
    'suffix-icon': 'el-icon-date'
  }
},

componentEvents

• type: Object
• default: {}

可传入各自对应 Element-UI 组件的 Events 。

effect 2.0.0-beta.5

• type: Function({ vm, setValue, setConfig })
  • vm: 搜索栏组件 vm 对象
  • filterModel: 搜索栏完整数据，可直接修改属性

// ...
filterFields: [
  {
    type: 'select',
    model: 'searchType',
    options: [
      { label: '类型1', value: 'type1' },
      { label: '类型2', value: 'type2' },
    ],
    label: '搜索类型',
    componentEvents: {
      change: (val) => {
        this.$emit('search-type-change', val)
      },
    },
  },
  {
    type: 'text',
    model: 'typeKeyword',
    componentProps: { placeholder: '请先选择搜索类型' },
    disabled: true,
    effect: ({ vm }) => {
      this.$on('search-type-change', (value) => {
        vm.placeholder = value ? '请输入搜索关键字' : '请先选择搜索类型'
        vm.disabled = !value
      })
    },
  },
],

组合

搜索栏每个字段组件为一个单位，默认超过屏幕宽度的组件会自动收起。

但对于有些需要组合多个字段组件的场景（如 “开始-结束” 2 个文本框），不想被自动收起功能分开成 2 个部分，可以使用组合配置形式，组合内的所有组件会视为一个单位，在收起时不被拆开，配置方式为将想要组合的元素放入一个数组内：

{
  // ...
  filterFields: [
    { type: 'text', model: 'text', label: '普通文本' },
    // 以下 2 个文本字段会展现为一个整体
    [
      { type: 'text', model: 'text1', label: '文本1' },
      { type: 'text', model: 'text2', label: '文本2' }
    ]
  ]
}

JSX

也支持直接传入 JSX ，但注意通过这种形式传入的表单元素所包含的值不会包含在提交参数内，需要自行将需要提交的数据在合适的时间点写入给 filterModel ，或者通过 transformRequestData 来附加包含相应的数据。

export default {
  data() {
    return {
      filterModel: {
        jsx: 'text from data'
      },
      filterButtons: [
        {
          // 如果需要渲染本实例内的数据，可使用 render 属性。需要注意 `render` 对内部 this 指向有要求，因此需要通过以下的形式定义：
          render: () => {
            return (
              <input
                value={this.filterModel.jsx}
                on-input={e => (this.filterModel.jsx = e.target.value)}
              />
            )
          }
        },

        // 或
        {
          render: function() {
            return (
              <input
                value={this.text}
                on-input={e => (this.text = e.target.value)}
              />
            )
          }.bind(this)
        },

        // 也支持使用 label 设置顶部的字段说明装饰元素，
        // 但需要注意需要设置 model 以及 filterModel 内有相匹配的属性，
        // 如果是自定义组件需要自行实现写入值的逻辑，
        // 参数 field 为该 object 项自身。
        {
          label: 'jsx',
          model: 'jsx',
          render: field => {
            return (
              <input
                value={this.filterModel.jsx}
                on-input={e => (this.filterModel.jsx = e.target.value)}
              />
            )
          }
        },

        // 或者可以简写成
        () => (
          <input
            value={this.text}
            on-input={e => (this.text = e.target.value)}
          />
        ),

        // 对于只需要绑定事件的场景，可以简写成以下的形式。
        // 注意：由于 JSX 解析后 this 指向会改变，因此如果需要立即使用本实例自身数据（如输出数据到内容）的时候，不能用下面这种形式。
        <button on-click={this.showDialog}>JSX 按钮</button>,
        <button on-click={() => this.showDialog(this.text)}>JSX 按钮</button>
      ]
    }
  },
  methods: {
    showDialog(text) {}
  }
  // ...
}