element-ui vue 2.x 版本业务组件

# 表格检索条件面板组件

TIP

在 FormGrid 基础上扩展，完全支持 FormGrid 全部功能

# 基本使用

<template>
  <el-card>
    <pro-form :model="form" :fields="fields" @search="search" @reset="reset"></pro-form>
    <pro-form
      :model="form"
      :fields="fields"
      :collapsed="false"
      :collapse="false"
      @search="search"
      @reset="reset"
    ></pro-form>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        form: { name: "", sex: "" },
        fields: [
          {
            label: "姓名",
            name: "name",
            component: "Input",
          },
          {
            label: "性别",
            name: "sex",
            component: "Select",
            dict: [
              {
                name: "女",
                value: 0,
              },
              {
                name: "男",
                value: 1,
              },
            ],
          },
          {
            label: "开始时间",
            name: "start",
            component: "DatePicker",
          },
          {
            label: "结束时间",
            name: "end",
            component: "DatePicker",
          },
        ],
      };
    },
    methods: {
      search() {
        alert("触发表单提交");
      },
      reset() {
        alert("触发表单重置");
      },
    },
  };
</script>

<style lang="scss" scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
显示代码 复制代码

# 不足一行

<template>
  <el-card>
    <pro-form :model="form" :fields="fields" @search="search" @reset="reset"></pro-form>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        form: { name: "", sex: "" },
        fields: [
          {
            label: "姓名",
            name: "name",
            component: "Input",
          },
          {
            label: "性别",
            name: "sex",
            component: "Select",
            dict: [
              {
                name: "女",
                value: 0,
              },
              {
                name: "男",
                value: 1,
              },
            ],
          },
        ],
      };
    },
    methods: {
      search() {
        alert("触发表单提交");
      },
      reset() {
        alert("触发表单重置");
      },
    },
  };
</script>

<style lang="scss" scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
显示代码 复制代码

# API

# ProForm

参数 说明 类型 可选值 默认值
collapse 是否显示展开收起按钮 boolean - true
collapsed 是否是收起状态 boolean - true

# ProForm Events

事件名称 说明 回调参数
search 点击查询按钮触发 ，返回表单规则验证结果 Function(callback: Function(boolean, object)
reset 点击重置按钮触发 -
collapse 点击展开收起按钮触发 回到展开状态 boolean

← 表格组件 →