Dynamic子表单
约 173 字小于 1 分钟
2025-02-06
表格用法
内部组件为crud组件,大部分属性参考Crud文档
vue2
vue3
配置`dynamic`的`children`字段即可
<template>
<el-button @click="addAll"
type="primary">添加10条子表单数据</el-button>
<br /><br />
<tvue-form :option="option"
v-model="form">
<template #input="{row}">
<el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
</template>
</tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const form = ref({
dynamic: [
{ input: 1, select: 1 },
{ input: 2, select: 2 }
]
});
const option = {
column: [
{
label: '子表单',
prop: 'dynamic',
type: 'dynamic',
span: 24,
children: {
align: 'center',
headerAlign: 'center',
rowAdd: (done) => {
ElMessage.success('新增回调');
done({ input: '默认值' });
},
rowDel: (row, done) => {
ElMessage.success('删除回调' + JSON.stringify(row));
done();
},
column: [
{
width: 200,
label: '输入框',
prop: 'input'
},
{
label: '选择框',
prop: 'select',
type: 'select',
dicData: [
{ label: '测试1', value: 1 },
{ label: '测试2', value: 2 }
]
}
]
}
}
]
};
function addAll () {
for (let i = 0; i < 10; i++) {
form.value.dynamic.push({ input: 1, select: 1 });
}
}
</script>表单用法
内部组件为form组件,大部分属性参考Form文档
vue2
vue3
配置`type`为`form`类型即可转化为表单格式,配置`index`为`false`即可隐藏序号
<template>
<tvue-form :option="option"
v-model="form">
<template #input="{ row }">
<el-tag>序号:{{ row.$index }}-数据:{{ row.input }}</el-tag>
</template>
</tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'; // 导入 ElMessage
const form = ref({
dynamic: [
{ input: 1, select: 1 },
{ input: 2, select: 2 }
]
});
const option = ref({
column: [
{
label: '子表单',
prop: 'dynamic',
type: 'dynamic',
span: 24,
children: {
index: false,
align: 'center',
type: 'form',
headerAlign: 'center',
rowAdd: (done) => {
ElMessage.success('新增回调'); // 使用 ElMessage
done({ input: '默认值' });
},
rowDel: (row, done) => {
ElMessage.success('删除回调' + JSON.stringify(row)); // 使用 ElMessage
done();
},
column: [
{
width: 200,
label: '输入框',
prop: 'input'
},
{
label: '选择框',
prop: 'select',
type: 'select',
dicData: [
{ label: '测试1', value: 1 },
{ label: '测试2', value: 2 }
]
}
]
}
}
]
});
</script>父子联动
vue2
vue3
<template>
<tvue-form :key="reload"
:option="option"
v-model="form"></tvue-form>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
const baseUrl = 'https://cli.avuejs.com/api/area';
const form = ref({});
const reload = ref(Math.random());
watch(() => form.value.province, () => {
reload.value = Math.random();
});
const option = computed(() => ({
column: [
{
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
},
{
label: '子表单',
prop: 'dynamic',
type: 'dynamic',
span: 24,
children: {
column: [
{
label: '城市',
prop: 'city',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getCity/` + form.value.province,
rules: [
{
required: true,
message: '请选择城市',
trigger: 'blur'
}
]
}
]
}
}
]
}));
</script>