一、简介

AppFind 是封装的查询组件。支持 指定宽度 或 指定列数 两种方式显示。

二、效果

http://210.12.53.106:8888/outer/test/AppFind (opens new window)

三、代码示例

3.1 指定宽度

<template>
  <app-find 
    ref="appFind"
    :findFormData.sync="findFormData"
    :findColumns="findColumns"
    @appFind="doFind" />
</template>

<script>
export default {
  name: 'TestAppFind',
  data () {
    return {
      findFormData: {},
      findColumns: [
        {
          title: '文本\n输入框',
          dataIndex: 'textfield',
          xtype: 'textfield',
          allowBlank: false,
          width: 500
        }
        // ...
      ]
    }
  },
  methods: {
    doFind (queryParamsModel, gridName) {
      console.log(this.findFormData)
      console.log(queryParamsModel)
      this.$message.info('请查看控制台输出')
    }
  }
}
</script>

3.2 指定列数 因高度问题，基本不用

<template>
  <div>
    <app-find
      ref="appFind"
      labelAlign="right"
      :showCount="50"
      :colCount="3"
      :findFormData.sync="findFormData"
      :findColumns="findColumns"
      @appFind="doFind" />
  </div>
</template>

<script>
export default {
  name: 'TestAppFind',
  data () {
    return {
      findFormData: {},
      findColumns: [
        {
          title: '文本输入框',
          dataIndex: 'textfield',
          xtype: 'textfield',
          allowBlank: false,
          width: 100
        }
        // ...
      ]
    }
  },
  methods: {
    doFind (queryParamsModel, gridName) {
      console.log(this.findFormData)
      console.log(queryParamsModel)
      this.$message.info('请查看控制台输出')
    }
  }
}
</script>