行内表单

介绍

z-form 是由 z-form-item 完成的通用表单

使用

点击查看代码

<!-- @format -->

<template>
  <z-inline-form class="m-20" v-model="form" :items="formList" ref="zInlineForm" :inline="true" label-width="140px" size="mini">
    <template #prepend>
      <div class="m-20">
        <span style="font-size: large; font-weight: 600"> Inline Form </span>
      </div>
    </template>
  </z-inline-form>
</template>
<script>
export default {
  name: 'zInlineFormDemo',
  data() {
    return {
      form: { check_in: '9:30' },
      formList: [
        {
          prop: 'age',
          label: '年龄',
          required: true
        },
        {
          prop: 'check_in',
          render: 'el-time-select',
          label: '使用el-time-select',
          option: {
            'picker-options': {
              start: '08:30',
              step: '00:15',
              end: '10:30'
            },
            style: { width: '100%' }
          }
        },
        {
          prop: 'number',
          label: '数字'
        },
        {
          prop: 'name',
          label: '姓名'
        }
      ]
    };
  }
};
</script>
<style scoped></style>

提示

当 items 中某一项只设置 prop label 时, z-form 默认渲染 el-input

Form attribute

name	description	注意
v-model	将要绑定到 el-form model 上的对象	必传 object
items	要渲染的字段列表,详情见	必传 Array
rules	与 el-form 中的 rules 保持一致	object
更多...	---	继承el-form的全部属性, 更多属性 (opens new window)