91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<!-- 自定义渲染 -->
|
||
<template>
|
||
<!-- 自定义表单 -->
|
||
<BasicForm @register="registerForm" style="margin-top: 20px">
|
||
<!-- #phone对应的是formSchemas对应slot(phone)插槽 -->
|
||
<template #phone="{ model, field }">
|
||
<!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称 -->
|
||
<a-input v-model:value="model[field]" placeholder="请输入手机号" />
|
||
<span class="font-color">请输入您的手机号，方便我们联系您</span>
|
||
</template>
|
||
<template #feedback="{ model, field }">
|
||
<JEditor v-model:value="model[field]" placeholder="请输入问题反馈" />
|
||
<span class="font-color">请您图文并茂，方便我们了解问题并及时反馈</span>
|
||
</template>
|
||
</BasicForm>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
//引入依赖
|
||
import { useForm, BasicForm, FormSchema } from '/@/components/Form';
|
||
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
|
||
import { h } from 'vue';
|
||
import { Input } from 'ant-design-vue';
|
||
|
||
//自定义表单字段
|
||
const formSchemas: FormSchema[] = [
|
||
{
|
||
field: 'productName',
|
||
label: '商品名称',
|
||
component: 'Input',
|
||
},
|
||
{
|
||
field: 'price',
|
||
label: '价格',
|
||
component: 'InputNumber',
|
||
},
|
||
{
|
||
field: 'buyNums',
|
||
label: '购买个数',
|
||
component: 'InputNumber',
|
||
//model 单签表单对象，field 当前字段
|
||
render: ({ model, field }) => {
|
||
//渲染自定义组件，以Input为例
|
||
return h(Input, {
|
||
placeholder: '请输入购买个数',
|
||
value: model[field],
|
||
style: { width: '100%' },
|
||
type: 'number',
|
||
onChange: (e: ChangeEvent) => {
|
||
model[field] = e.target.value;
|
||
},
|
||
});
|
||
},
|
||
},
|
||
{
|
||
field: 'describe',
|
||
label: '描述',
|
||
component: 'Input',
|
||
componentProps: {
|
||
disabled: true,
|
||
},
|
||
//渲染 values当前表单所有值
|
||
render: ({ values }) => {
|
||
let productName = values.productName?values.productName:'';
|
||
let price = values.price ? values.price : 0;
|
||
let buyNums = values.buyNums ? values.buyNums : 0;
|
||
return '购买商品名称：' + productName + ', 总价格: ' + price * buyNums + '元';
|
||
},
|
||
},
|
||
];
|
||
|
||
/**
|
||
* BasicForm绑定注册;
|
||
*/
|
||
const [registerForm] = useForm({
|
||
//注册表单列
|
||
schemas: formSchemas,
|
||
showResetButton: false,
|
||
labelWidth: '150px',
|
||
submitButtonOptions: { text: '提交', preIcon: '' },
|
||
actionColOptions: { span: 17 },
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/** 数字输入框样式 */
|
||
:deep(.ant-input-number) {
|
||
width: 100%;
|
||
}
|
||
</style>
|