Seach 查询

基础使用

<template>
  <WMSearch :option="searchOption" @update="handleUpdate"></WMSearch>
</template>

<script>
  export default {
    computed: {
      searchOption() {
        return {
          columns: [
            {
              prop: 'param1',
              type: 'input',
              label: '输入框',
              defaultValue: 'hello world',
            },
            {
              prop: 'param2',
              type: 'select',
              label: '选择框',
              fieldOption: {
                dicData: [
                  {
                    label: '是',
                    value: 1,
                  },
                  {
                    label: '否',
                    value: 0,
                  },
                ],
              },
            },
          ],
        };
      },
    },
    methods: {
      handleUpdate(val) {
        console.log(val);
      },
    },
  };
</script>

显示代码

查询联动

<template>
  <WMSearch :option="searchOption" @update="handleUpdate"></WMSearch>
</template>

<script>
  export default {
    data() {
      return {
        searchForm: {
          param1: '',
          param2: '',
        },
      };
    },
    computed: {
      searchOption() {
        return {
          columns: [
            {
              prop: 'param1',
              type: 'select',
              label: '选择框',
              defaultValue: this.searchForm.param1,
              fieldOption: {
                dicData: [
                  {
                    label: '是',
                    value: '1',
                  },
                  {
                    label: '否',
                    value: '0',
                  },
                ],
                on: {
                  change: (val) => {
                    this.searchForm.param1 = val;
                    this.searchForm.param2 = val;
                  },
                },
              },
            },
            {
              prop: 'param2',
              type: 'input',
              label: '输入框',
              defaultValue: this.searchForm.param2,
            },
          ],
        };
      },
    },
    methods: {
      handleUpdate(val) {
        console.log(val);
      },
    },
  };
</script>

显示代码

自定义查询项

<template>
  <WMSearch :option="searchOption" @update="handleUpdate">
    <template #param2> <el-button type="primary" size="mini">查询</el-button> </template>
  </WMSearch>
</template>

<script>
  export default {
    computed: {
      searchOption() {
        return {
          columns: [
            {
              prop: 'param1',
              type: 'input',
              label: '输入框',
              defaultValue: 'hello world',
            },
            {
              prop: 'param2',
              type: 'custom',
            },
          ],
        };
      },
    },
    methods: {
      handleUpdate(val) {
        console.log(val);
      },
    },
  };
</script>

显示代码

Search Attributes

参数	说明	类型	默认值
option	表单配置	object	{}

Search Events

事件名	说明	参数
update	动态获取查询对象	{}

Search Option

option 属性配置, 包含 element ui 原始属性

参数	说明	类型	默认值
columns	表单项	array	[]

Option columns

参数	说明	类型	默认值
prop	标签文本的内容属性名称	string	''
label	标签文本的内容	string	''
type	控件类型	string	''
dataType	默认值类型	[array, number]	''
defaultValue	默认值	any	''
fieldOption	控件配置	object	{}

Columns fieldOption

fieldOption 的配置包含当前控件类型的所有属性

参数	说明	类型	默认值
dicData	数据字典值(下拉,单选,多选)	array	[]
data	数据字典值(下拉树)	array	[]
on	控件事件	object	{}