9.3组件文档库

# Form 表单

# 基础使用

<template>
  <div>
    <WMForm ref="formRef" :option="formOption" v-model="ruleForm"></WMForm>
    <div class="form-fotter">
      <el-button @click="reset">重置</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          param1: '',
          param2: '',
        },
      };
    },
    computed: {
      formOption() {
        return {
          labelWidth: '130px',
          size: 'mini',
          columns: [
            {
              prop: 'param1',
              label: '输入框',
              type: 'input',
              fieldOption: {
                placeholder: '请输入',
              },
            },
            {
              prop: 'param2',
              label: '文本框',
              type: 'input',
              fieldOption: {
                placeholder: '请输入',
                type: 'textarea',
              },
            },
          ],
        };
      },
    },
    methods: {
      reset() {
        this.$refs.formRef.$refs.wmForm.resetFields();
      },
    },
  };
</script>

<style>
  .form-fotter {
    display: flex;
    justify-content: flex-end;
  }
</style>
显示代码

# 自定义表单项

<template>
  <div>
    <WMForm ref="formRef" :option="formOption" v-model="ruleForm">
      <template #param3>
        <el-input v-model="ruleForm.param3" placeholder="请输入"></el-input>
      </template>
    </WMForm>
    <div class="form-fotter">
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          param1: '',
          param2: '',
          param3: '',
        },
      };
    },
    computed: {
      formOption() {
        return {
          labelWidth: '130px',
          size: 'mini',
          columns: [
            {
              prop: 'param1',
              label: '输入框',
              type: 'input',
              fieldOption: {
                placeholder: '请输入',
              },
            },
            {
              prop: 'param2',
              label: '文本框',
              type: 'input',
              fieldOption: {
                placeholder: '请输入',
                type: 'textarea',
              },
            },
            {
              prop: 'param3',
              label: '自定义',
              type: 'custom',
              rules: [{ required: true, message: '请输入', trigger: 'blur' }],
            },
          ],
        };
      },
    },
    methods: {
      reset() {
        this.$refs.formRef.$refs.wmForm.resetFields();
      },
      save() {
        this.$refs.formRef.$refs.wmForm.validate((valid) => {
          if (valid) {
          }
        });
      },
    },
  };
</script>

<style>
  .form-fotter {
    display: flex;
    justify-content: flex-end;
  }
</style>
显示代码

# 完整示例

<template>
  <div>
    <WMForm ref="formRef" :option="formOption" v-model="ruleForm"></WMForm>
    <div class="form-fotter">
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          param1: '',
          param2: '',
          param3: 1,
          param4: [],
          param5: 0,
          param6: '',
          param7: '',
          param8: false,
          param9: '',
          param10: '',
          param11: '',
          param12: [],
        },
      };
    },
    computed: {
      formOption() {
        return {
          labelWidth: '130px',
          size: 'mini',
          columns: [
            {
              prop: 'param1',
              label: '输入框',
              type: 'input',
              rules: [{ required: true, message: '请输入', trigger: 'blur' }],
              span: 12,
              fieldOption: {
                placeholder: '请输入',
              },
            },
            {
              prop: 'param2',
              label: '文本框',
              type: 'input',
              rules: [{ required: true, message: '请输入', trigger: 'blur' }],
              span: 12,
              fieldOption: {
                placeholder: '请输入',
                type: 'textarea',
              },
            },
            {
              prop: 'param3',
              label: '单选',
              type: 'radio',
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
              span: 12,
              fieldOption: {
                dicData: [
                  {
                    label: '是',
                    value: 1,
                  },
                  {
                    label: '否',
                    value: 0,
                  },
                ],
              },
            },
            {
              prop: 'param4',
              label: '多选',
              type: 'checkbox',
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
              span: 12,
              fieldOption: {
                dicData: [
                  {
                    label: '苏州',
                    value: '1',
                  },
                  {
                    label: '无锡',
                    value: '2',
                  },
                  {
                    label: '常州',
                    value: '3',
                  },
                ],
              },
            },
            {
              prop: 'param5',
              label: '计数器',
              type: 'input-number',
              rules: [{ required: true, message: '请输入', trigger: ['change', 'blur'] }],
              span: 12,
            },
            {
              prop: 'param6',
              label: '选择器',
              type: 'select',
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
              span: 12,
              fieldOption: {
                dicData: [
                  {
                    label: '是',
                    value: 1,
                  },
                  {
                    label: '否',
                    value: 0,
                  },
                ],
              },
            },
            {
              prop: 'param7',
              label: '级联选择器',
              type: 'cascader',
              span: 12,
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
              fieldOption: {
                options: [
                  {
                    value: 'zhinan',
                    label: '指南',
                    children: [
                      {
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [
                          {
                            value: 'yizhi',
                            label: '一致',
                          },
                          {
                            value: 'fankui',
                            label: '反馈',
                          },
                        ],
                      },
                      {
                        value: 'daohang',
                        label: '导航',
                        children: [
                          {
                            value: 'cexiangdaohang',
                            label: '侧向导航',
                          },
                          {
                            value: 'dingbudaohang',
                            label: '顶部导航',
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            },
            {
              prop: 'param8',
              label: '开关',
              type: 'switch',
              span: 12,
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
            },
            {
              prop: 'param9',
              label: '时间选择器',
              type: 'time-picker',
              span: 12,
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
              fieldOption: {
                'is-range': true,
                'range-separator': '至',
                'start-placeholder': '开始时间',
                'end-placeholder': '结束时间',
              },
            },
            {
              prop: 'param10',
              label: '日期选择器',
              type: 'date-picker',
              span: 12,
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
              fieldOption: {
                type: 'daterange',
                'range-separator': '至',
                'start-placeholder': '开始时间',
                'end-placeholder': '结束时间',
              },
            },
            {
              prop: 'param11',
              label: '日期时间选择器',
              type: 'date-picker',
              span: 12,
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
              fieldOption: {
                type: 'datetimerange',
                'range-separator': '至',
                'start-placeholder': '开始时间',
                'end-placeholder': '结束时间',
              },
            },
            {
              prop: 'param12',
              label: '下拉树',
              type: 'treeSelect',
              span: 12,
              rules: [{ required: true, message: '请选择', trigger: 'change' }],
              fieldOption: {
                data: [
                  {
                    label: '乌鲁木齐市',
                    value: '2',
                    children: [
                      { label: '达坂城区', value: '7' },
                      { label: '头屯河区', value: '8' },
                      { label: '乌鲁木齐县', value: '9' },
                    ],
                  },
                ],
                'check-strictly': true,
                'show-checkbox': true,
              },
            },
          ],
        };
      },
    },
    methods: {
      reset() {
        this.$refs.formRef.$refs.wmForm.resetFields();
      },
      save() {
        this.$refs.formRef.$refs.wmForm.validate((valid) => {
          if (valid) {
          }
        });
      },
    },
  };
</script>

<style>
  .form-fotter {
    display: flex;
    justify-content: flex-end;
  }
</style>
显示代码

# 信息回显

<template>
  <div class="box">
    <WMForm ref="formRef" :option="formOption" v-model="ruleForm"></WMForm>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          param1: '麻子',
          param2: '120岁',
          param3: '哈哈哈哈哈哈',
        },
      };
    },
    computed: {
      formOption() {
        return {
          labelWidth: '40px',
          size: 'mini',
          columns: [
            {
              prop: 'param1',
              label: '姓名',
              type: 'text',
              span: 8,
            },
            {
              prop: 'param2',
              label: '年龄',
              type: 'text',
              span: 8,
            },
            {
              prop: 'param3',
              label: '地址',
              type: 'text',
              span: 8,
            },
            {
              prop: 'param1',
              label: '姓名',
              type: 'text',
              span: 8,
            },
            {
              prop: 'param2',
              label: '年龄',
              type: 'text',
              span: 8,
            },
            {
              prop: 'param3',
              label: '地址',
              type: 'text',
              span: 8,
            },
          ],
        };
      },
    },
  };
</script>

<style lang="scss" scoped>
.box {
  background: #ccc;
  padding: 8px;
}
</style>
显示代码

# Form Attributes

参数 说明 类型 默认值
value(v-model) 表单数据对象 object {}
option 表单配置 object {}

# Table Events

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

# Form Option

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

参数 说明 类型 默认值
gutter 栅格间隔 number 0
columns 表单项 array []

# Option columns

参数 说明 类型 默认值
prop 标签文本的内容属性名称 string ''
label 标签文本的内容 string ''
span 栅格占据的列数 number ''
type 控件类型 string ''
rules 校验规则 array []
fieldOption 控件配置 object {}

# Columns fieldOption

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

参数 说明 类型 默认值
dicData 数据字典值(下拉,单选,多选) array []
data 数据字典值(下拉树) array []

# 其他属性

element-ui (opens new window)

← Seach 查询 →