Go 文档官网Appearance
DataForm
表单组件。
接口
nexusData: 联动 JSON 数据；action: 可选，表单接口；
方法
submit: 提交表单；- 如果
action为空，回调参数分别为：- formData：表单数据
- formElement：表单元素
- 如果
action不为空，回调参数为：- interfaceData：接口返回数据
- formElement：表单元素
- 如果
表单参数
name: 通过formData[name]获取该表单元素的 value ；title：输入框为空时的提示文字；
示例
自行处理接口
<DataForm :nexusData="nexusData" @submit="submit">
<input type="text" name="name" placeholder="请输入您的姓名">
<input type="text" name="phone" placeholder="请输入您的联系方式">
<Nexus name="province" bind="pro" placeholder="请选择省份" title="省份">
<Nexus name="city" bind="city" placeholder="请选择城市" title="城市">
<Nexus name="dealer" bind="shop" placeholder="请选择经销商" title="经销商"/>
</Nexus>
</Nexus>
</DataForm>
import { DataForm, Nexus } from "@go/ui";
import shopData from './shop.json';
export default defineComponent({
components: {
DataForm, Nexus
},
data(){
nexusData: shopData,
},
methods: {
submit(formData, formElement){
}
}
})
TIP
汽车专题省份、城市、经销商三级联动，测试数据：shop.json 。
返回接口信息
<DataForm :nexusData="nexusData" :action="action" @submit="submit">
<input type="text" name="name" placeholder="请输入您的姓名">
<input type="text" name="phone" placeholder="请输入您的联系方式">
<Nexus name="province" bind="pro" placeholder="请选择省份" title="省份">
<Nexus name="city" bind="city" placeholder="请选择城市" title="城市">
<Nexus name="dealer" bind="shop" placeholder="请选择经销商" title="经销商"/>
</Nexus>
</Nexus>
</DataForm>
import { DataForm, Nexus } from "@go/ui";
import shopData from './shop.json';
import urlData from './srcipt/config.url';
export default defineComponent({
components: {
DataForm, Nexus
},
data(){
nexusData: shopData,
action: urlData.submit, // 表单接口
},
methods: {
submit(interfaceData, formElement){
}
}
})
清空表单
export default defineComponent({
methods: {
submit(data, formElement){
// ...
// 逻辑处理完成之后
formElement.reset();
}
}
})
添加隐藏信息
<DataForm>
<input type="hidden" name="flag" :value="flagValue">
</DataForm>
export default defineComponent({
data(){
flagValue: netease.ua.pc ? 'pc': 'wap',
}
})
自定样式
:deep(.data-form){
input[name="phone"]{
}
}