表单布局

提示

• size
• span
• gutter
• offset
• labelWidth
• labelPosition

以上属性配置到option下作用于全部列，优先列中配置属性生效，更多用法可以参考Element-plus-Layout 布局和Element-plus-Form 表单

栏大小

效果预览可直接操作下方示例

设置size属性调节栏的大小，默认为small

正在加载示例…

<template>
  <el-row style="margin-bottom:20px">
    <el-radio-group v-model="sizeValue">
      <el-radio label="large">large</el-radio>
      <el-radio label="default">default</el-radio>
      <el-radio label="small">small</el-radio>
    </el-radio-group>
  </el-row>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref, computed } from 'vue'

const sizeValue = ref('default')

const option = computed(() => ({
  size: sizeValue.value,
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    },
    {
      label: '年龄',
      prop: 'number',
      type: 'number'
    }
  ]
}))
</script>

栏距列数

效果预览可直接操作下方示例

设置span属性调节栏列数,默认为12

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      span: 24
    },
    {
      label: '性别',
      prop: 'sex',
      span: 8
    },
    {
      label: '年龄',
      prop: 'number',
      type: 'number',
      span: 8
    }
  ]
})
</script>

栏距间隔

效果预览可直接操作下方示例

设置gutter属性调节栏列数,默认为0

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  gutter: 100,
  column: [
    {
      label: '姓名',
      prop: 'name',
    },
    {
      label: '性别',
      prop: 'sex',
    }
  ]
})
</script>

分栏偏移

效果预览可直接操作下方示例

设置offset属性调节栏列数,默认为12

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      span: 8
    },
    {
      label: '性别',
      prop: 'sex',
      offset: 8,
      span: 8
    },
    {
      label: '年龄',
      prop: 'number',
      type: 'number',
      offset: 8,
      span: 8
    }
  ]
})
</script>

栏成行

效果预览可直接操作下方示例

设置row属性栅格后面的内容是否从新的一行开始展示

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      span: 8
    },
    {
      label: '性别',
      prop: 'sex',
      span: 8,
      row: true
    },
    {
      label: '年龄',
      prop: 'number',
      type: 'number',
      span: 8
    }
  ]
})
</script>

栏排序

效果预览可直接操作下方示例

设order属性可排序与column中顺序不同

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex',
      order: 1
    }
  ]
})
</script>

栏隐藏

效果预览可直接操作下方示例

设置display属性隐藏栏目

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      display: false
    }
  ]
});
</script>

标题宽度

效果预览可直接操作下方示例

labelWidth为标题的宽度，默认为110

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      labelWidth: 200,
      label: '我是一个超级长的标题',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
})
</script>

标题位置

效果预览可直接操作下方示例

labelPosition为标题的位置，默认为left

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  labelPosition: 'top',
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
})
</script>

样式布局

.upload {
  right: 20px;
  bottom: 100px;
}

效果预览可直接操作下方示例

利用className去布局

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref(({
  column: [
    {
      label: '姓名',
      prop: 'name',
      span: 12,
      row: true
    },
    {
      label: '性别',
      prop: 'sex',
      span: 12,
      row: true
    },
    {
      label: '身份证号',
      prop: 'id',
      span: 12
    },
    {
      label: '视频',
      prop: 'video',
      type: 'upload',
      className: 'upload',
      listType: 'picture-img'
    }
  ]
}));
</script>

标题辅助语

效果预览可直接操作下方示例

labelTip为标题提示的内容,labelTipPlacement为标题提示语的方向，默认为bottom

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '内容1',
      prop: 'text1',
      labelTip: '我是一个标题提示语'
    },
    {
      label: '内容2',
      prop: 'text2',
      labelTip: '我是一个标题提示语',
      labelTipPlacement: 'right'
    }
  ]
})
</script>

内容辅助语

效果预览可直接操作下方示例

tip为提示的内容,tipPlacement为提示语的方向，默认为bottom

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  column: [{
    label: '内容1',
    prop: 'text1',
    tip: '我是一个默认提示语',
  }, {
    label: '内容2',
    prop: 'text2',
    tip: '我是一个左边提示语',
    tipPlacement: 'left',
  }]
})
</script>

详情编辑

效果预览可直接操作下方示例

detail控制是否为详情页

正在加载示例…

<template>
  <el-button @click="handle"
             style="margin-left: 20px">{{ title }}</el-button>
  <br /><br />
  <avue-form :option="option"
             v-model="form"
             @submit="submit"></avue-form>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const form = ref({});
const option = ref({
  detail: true,
  labelWidth: 110,
  group: [
    {
      label: '用户信息',
      prop: 'jbxx',
      icon: 'el-icon-edit-outline',
      column: [
        {
          label: '姓名',
          prop: 'name',
          rules: [
            {
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '性别',
          prop: 'sex',
        }
      ]
    },
    {
      label: '退款申请',
      prop: 'tksq',
      icon: 'el-icon-view',
      column: [
        {
          label: '省份',
          span: 24,
          prop: 'province',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `https://api.avuejs.com/area/getProvince`,
          rules: [
            {
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '多选',
          prop: 'checkbox',
          type: 'checkbox',
          all: true,
          props: {
            label: 'name',
            value: 'code'
          },
          span: 24,
          dicUrl: 'https://api.avuejs.com/area/getProvince'
        }
      ]
    },
    {
      label: '用户信息',
      prop: 'yhxx',
      icon: 'el-icon-edit-outline',
      column: [
        {
          label: '测试长度',
          prop: 'len',
          value: 3,
          maxlength: 5,
        },
        {
          label: '测试自定义',
          prop: 'lens',
          value: 3
        }
      ]
    }
  ]
});

const title = computed(() => option.value.detail ? '编 辑' : '保 存');

function handle () {
  option.value.detail = !option.value.detail;
}

function submit () {
  console.log('Form submitted with data:', form.value);
}

onMounted(() => {
  setTimeout(() => {
    form.value = {
      name: 'small',
      province: '110000',
      checkbox: ['110000']
    };
  }, 100);
});
</script>

效果预览可直接操作下方示例

正在加载示例…

<template>
  <el-button @click="detail = !detail">{{ title }}</el-button>
  <br /><br />
  <avue-form :option="option"
             v-model="obj"
             @submit="submit">
    <template #datetime="{}">
      <span v-if="detail">
        这是我要选择的日期{{ datetime[0] }}年{{ datetime[1] }}月{{ datetime[2] }}日
      </span>
      <el-input v-else
                v-model="obj.datetime"></el-input>
    </template>
  </avue-form>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';

const detail = ref(true);
const obj = ref({ datetime: '2020-05-01' });

const datetime = computed(() => obj.value.datetime.split('-'));

const option = computed(() => ({
  detail: detail.value,
  column: [
    {
      label: '选择日期',
      span: 12,
      prop: 'datetime',
      type: 'datetime',
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD"
    },
    {
      label: '',
      labelWidth: 10,
      prop: 'divider',
      display: !detail.value,
      component: 'elDivider',
      span: 24,
      params: {
        html: '这是一大堆的文字介绍，很长 很长 很长成这是一大堆的文字介绍，很长 很长 很长成这是一大堆的文字介绍，很长 很长 很长成',
        contentPosition: "left",
      }
    }
  ]
}));

const title = computed(() => detail.value ? '编辑' : '保存');

const submit = () => {
  ElMessage.success(JSON.stringify(obj.value));
};
</script>

分组展示

将表单已分组的形式展示

效果预览可直接操作下方示例

用法普通的form组件分组用法一样，在group中配置结构体即可

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"
             @submit="handleSubmit"
             @tab-click="handleTabClick">
    <template #group1-header="{ column }">
      <svg aria-hidden="true"
           style="width:30px;height:30px;">
        <use xlink:href="#icon-duanxinguanli"></use>
      </svg>
      {{ column.label }}
    </template>
    <template #text3="{}">
      <el-input placeholder="自定义"
                v-model="form.text3"></el-input>
    </template>
  </avue-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({
  text: '文本',
  text1: '文本1',
  text2: '文本2',
  text3: '文本3'
});

const option = ref({
  column: [{
    label: '内容',
    prop: 'text'
  }],
  group: [
    {
      icon: 'el-icon-info',
      label: '分组1',
      collapse: false,
      prop: 'group1',
      column: [{
        label: '内容1',
        prop: 'text1'
      }]
    },
    {
      icon: 'el-icon-info',
      label: '分组2',
      arrow: false,
      prop: 'group2',
      column: [{
        label: '选项卡2',
        prop: 'text2'
      }, {
        label: '选项卡3',
        prop: 'text3'
      }]
    }
  ]
});

const handleSubmit = () => {
  ElMessage.success(JSON.stringify(form.value));
};

const handleTabClick = (event) => {
  ElMessage.success(event);
};
</script>

选项卡展示

将表单已选项卡的形式展示

效果预览可直接操作下方示例

配置tabs为true即可开启选项卡,tabsVerifyAll是否单独提交，默认为false

正在加载示例…

<template>
  <el-button @click="tabs.value = !tabs.value">转化</el-button><br /><br />
  <avue-form @tab-click="handleTabClick"
             :option="option"
             v-model="form"
             @submit="handleSubmit">
    <template #group1-header>
      <h4>自定义表头</h4>
    </template>
  </avue-form>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const tabs = ref(true)
const form = ref({
  text: '文本',
  text1: '文本1',
  text2: '文本2',
  text3: '文本3',
})

const option = computed(() => ({
  tabs: tabs.value,
  tabsActive: 2,
  column: [{
    label: '内容1',
    prop: 'text1',
  }],
  group: [
    {
      icon: 'el-icon-info',
      label: '分组1',
      prop: 'group1',
      column: [{
        label: '内容1',
        prop: 'text1',
      }]
    }, {
      icon: 'el-icon-info',
      label: '分组2',
      prop: 'group2',
      column: [{
        label: '选项卡2',
        prop: 'text2',
      }, {
        label: '选项卡3',
        prop: 'text3',
      }]
    }
  ]
}))

function handleSubmit () {
  ElMessage.success(JSON.stringify(form.value))
  setTimeout(() => {
    done()
  }, 2000)
}

function handleTabClick (tabs, event) {
  ElMessage.success('序号为:' + tabs.index)
}
</script>