表单布局
约 590 字大约 2 分钟
2025-02-06
提示
- size
- span
- gutter
- offset
- labelWidth
- labelPosition
以上属性配置到option下作用于全部列,优先列中配置属性生效,更多用法可以参考Element-plus-Layout 布局和Element-plus-Form 表单
栏大小
vue2
vue3
设置`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>
<tvue-form :option="option"></tvue-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>栏距列数
vue2
vue3
设置`span`属性调节栏列数,默认为12
<template>
<tvue-form :option="option"></tvue-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>栏距间隔
vue2
vue3
设置`gutter`属性调节栏列数,默认为0
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue'
const option = ref({
gutter: 100,
column: [
{
label: '姓名',
prop: 'name',
},
{
label: '性别',
prop: 'sex',
}
]
})
</script>分栏偏移
vue2
vue3
设置`offset`属性调节栏列数,默认为12
<template>
<tvue-form :option="option"></tvue-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>栏成行
vue2
vue3
设置`row`属性栅格后面的内容是否从新的一行开始展示
<template>
<tvue-form :option="option"></tvue-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>栏排序
vue2
vue3
设`order`属性可排序与`column`中顺序不同
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue'
const option = ref({
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex',
order: 1
}
]
})
</script>栏隐藏
vue2
vue3
设置`display`属性隐藏栏目
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '姓名',
prop: 'name',
display: false
}
]
});
</script>标题宽度
vue2
vue3
`labelWidth`为标题的宽度,默认为`110`
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue'
const option = ref({
column: [
{
labelWidth: 200,
label: '我是一个超级长的标题',
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
]
})
</script>标题位置
vue2
vue3
`labelPosition`为标题的位置,默认为`left`
<template>
<tvue-form :option="option"></tvue-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;
}vue2
vue3
利用`className`去布局
<template>
<tvue-form :option="option"></tvue-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>标题辅助语
vue2
vue3
`labelTip`为标题提示的内容,`labelTipPlacement`为标题提示语的方向,默认为`bottom`
<template>
<tvue-form :option="option"></tvue-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>内容辅助语
vue2
vue3
`tip`为提示的内容,`tipPlacement`为提示语的方向,默认为`bottom`
<template>
<tvue-form :option="option"></tvue-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>详情编辑
vue2
vue3
`detail`控制是否为详情页
<template>
<el-button @click="handle"
style="margin-left: 20px">{{ title }}</el-button>
<br /><br />
<tvue-form :option="option"
v-model="form"
@submit="submit"></tvue-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://cli.avuejs.com/api/area/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
},
{
label: '多选',
prop: 'checkbox',
type: 'checkbox',
all: true,
props: {
label: 'name',
value: 'code'
},
span: 24,
dicUrl: 'https://cli.avuejs.com/api/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>vue2
vue3
`detail`控制是否为详情页
<template>
<el-button @click="detail = !detail">{{ title }}</el-button>
<br /><br />
<tvue-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>
</tvue-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>分组展示
将表单已分组的形式展示
vue2
vue3
用法普通的form组件分组用法一样,在`group`中配置结构体即可
<template>
<tvue-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>
</tvue-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>选项卡展示
将表单已选项卡的形式展示
vue2
vue3
配置`tabs`为true即可开启选项卡,`tabsVerifyAll`是否单独提交,默认为`false`
<template>
<el-button @click="tabs.value = !tabs.value">转化</el-button><br /><br />
<tvue-form @tab-click="handleTabClick"
:option="option"
v-model="form"
@submit="handleSubmit">
<template #group1-header>
<h4>自定义表头</h4>
</template>
</tvue-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>