- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
某些场景下,我们的表单需要做成可配置表单,根据管理员配置好的表单信息来动态生成表单,比如业务员就只能填写业务类型的表单信息,运营人员可以配置活动类型的表单信息,类似于表单的权限控制.
预览动态表单效果在文章最后 。
<el-form
ref="ruleForm"
:rules="ruleArr"
:model="ruleForm"
label-width="80px"
>
<div v-for="(item, index) in formArr">
<div v-if="item.isShow == 1 && item.type == 1">
<el-form-item
:label="item.label"
:prop="item.isRule ? item.name : ''"
>
<el-input
v-model="ruleForm[item.name]"
:placeholder="`请输入${item.label}`"
></el-input>
</el-form-item>
</div>
<div v-if="item.isShow == 1 && item.type == 2">
<el-form-item :label="item.label" :prop="item.isRule ? item.name : ''">
<el-select v-model="ruleForm[item.name]" :placeholder="item.rules">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
<div v-if="item.isShow == 1 && item.type == 3">
<el-form-item :label="item.label" :prop="item.isRule ? item.name : ''">
<el-date-picker
v-model="ruleForm[item.name]"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</div>
<div v-if="item.isShow == 1 && item.type == 4">
<el-form-item :label="item.label" :prop="item.isRule ? item.name : ''">
<el-switch v-model="ruleForm[item.name]"></el-switch>
</el-form-item>
</div>
<div v-if="item.isShow == 1 && item.type == 5">
<el-form-item :label="item.label" :prop="item.isRule ? item.name : ''">
<el-checkbox-group v-model="ruleForm[item.name]">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</div>
<div v-if="item.isShow == 1 && item.type == 6">
<el-form-item :label="item.label" :prop="item.isRule ? item.name : ''">
<el-radio-group v-model="ruleForm[item.name]">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
</div>
<div v-if="item.isShow == 1 && item.type == 7">
<el-form-item :label="item.label" :prop="item.isRule ? item.name : ''">
<el-input
:placeholder="`请输入${item.label}`"
type="textarea"
v-model="ruleForm[item.name]"
></el-input>
</el-form-item>
</div>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>立即创建</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
<el-button @click="backData">回显</el-button>
</el-form-item>
</el-form>
表单的输入框有很多种,例如:输入框、下拉选择框、时间选择器、单选器、多选器、 switch 开关、文本域等.
我们可以通过 type 类型来判断是其中的哪一个类型,例如: type === 1 代表输入框 。
ruleForm: {}, // 输入的绑定表单
formArr: [], // 展示的表单
ruleArr: {}, // 校验规则
// 需要动态展示的数据
/*
1 输入
2 下拉选择
3 日期选择
4 开关switch
5 多选
6 单选
7 文本域
*/
obj = [
{
name: "name",
label: "活动名称",
type: 1, // 类型:输入、下拉、日期....
isShow: 1, // 1显示 0不显示
isRule: 1, // 1校验 0不校验
},
{
name: "region",
label: "活动区域",
type: 2,
isShow: 1,
isRule: 1,
},
{
name: "date1",
label: "活动时间",
type: 3,
isShow: 1,
isRule: 1,
},
{
name: "delivery",
label: "即时配送",
type: 4,
isShow: 1,
isRule: 1,
},
{
name: "type",
label: "活动性质",
type: 5,
isShow: 1,
isRule: 1,
},
{
name: "resource",
label: "特殊资源",
type: 6,
isShow: 1,
isRule: 1,
},
{
name: "desc",
label: "活动形式",
type: 7,
isShow: 1,
isRule: 1,
},
{
name: "name2",
label: "输入框2",
type: 1,
isShow: 0,
isRule: 0,
},
{
name: "name3",
label: "选择框2",
type: 2,
isShow: 0,
isRule: 0,
},
];
由于表单字段是动态生成的,不确定那些输入框是需要校验的,这里也是根据类型来判断是否需要校验,例如: isRule == 1 代表需要校验,此时校验的值 :prop 必须等于 表单的 K 否则会无法校验,由于需要对其 Key ,需要后端返回或者前端在前期把数据处理好.
formGroup() {
this.ruleArr = {}; // 调用之前先重置校验规则
obj.forEach((el) => {
if (el.isShow == 1 && el.type == 5) {
// 5 多选框,数据必须是数组,因为vue2操作数组会失去双向绑定,需要用$set
this.$set(this.ruleForm, el.name, []);
} else if (el.isShow == 1 && el.type == 3) {
this.$set(this.ruleForm, el.name, []);
} else if (el.isShow == 1 && el.type != 3 && el.type != 5) {
// 需要把 K 赋值给form,用于回显
this.$set(this.ruleForm,el.name,null);
}
// 添加校验规则
this.ruleArr[el.name] = [
{ required: true, message: `请输入${el.label}`, trigger: "blur" },
];
});
// 页面遍历该数组生成表单
this.formArr.push(...obj);
}
到这里我们的动态表单就创建好了 我们只需要根据接口返回的数据渲染表单即可,比如我在这里新增两条数据 。
obj= [
// ...
{
name: "name2",
label: "输入框2",
type: 1,
isShow: 1, // 显示
isRule: 0, // 不校验
},
{
name: "name3",
label: "选择框2",
type: 2,
isShow: 1, // 显示
isRule: 0, // 不校验
}
]
此处就动态生成了两条输入框,并且根据类型判断是否是选择框以及输入框是否校验.
正常提交即可,如果封装成组件,这里只需要把值传出去就 ok 了.
// 提交
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
console.log("提交数据", this.ruleForm);
} else {
console.log("error submit!!");
return false;
}
});
}
表单重置利用 element 提供的 reset 不是一个保险的方法,因为 reset 函数绑定的是 prop ,如果表单未绑定 prop 则不会重置该数据,所以需要把数据遍历处理一下,并且,部分输入框(多选)绑定的是数组, vue2 对数组的处理是有缺陷的,直接重置会导致失去双向绑定,对于数组的处理需要使用 $set .
// 重置
resetForm(formName) {
this.$refs[formName].resetFields();
// 重置关联的是prop,为了防止部分数据未重置,需要遍历重置一下
for (let [k, v] of Object.entries(this.ruleForm)) {
if (v instanceof Array) {
// 数组需要用$set否则会失去双向绑定
this.$set(this.ruleForm, k, []);
} else {
// 重置非数组数据
this.ruleForm[k] = null;
}
}
}
1、多选的格式必须是数组,所以需要判断对应的格式是否为数组.
2、需要比对页面渲染的时间格式,如果是时间戳则转成时间戳,需要字符串则转成字符串,此处的日期选择器为起始和结束选择器,格式绑定为数组.
3、回显的值赋值到页面上会出现失去双向绑定的问题,点击提交的时候校验无法通过,需要用 $set 让数据变成双向绑定的状态.
// 回显
backData() {
let data = {
name: "DCodes",
region: "武汉",
delivery: true,
date1: ["2023-07-12", "2023-07-15"],
type: "线下主题活动",
resource: "线上品牌商赞助",
desc: "技术分享",
};
for (let [k, v] of Object.entries(data)) {
Object.keys(this.ruleForm).forEach((el) => {
if (el == k) {
if (k == "type") {
this.$set(this.ruleForm,k,[v])
} else if (k == "date1") {
let date = [v[0],v[1]]
this.$set(this.ruleForm,k,date)
} else {
this.ruleForm[k] = v;
}
}
});
}
}
css实现炫酷充电动画 (👈点击直达) 再也不用担心组件跨层级的数据共享和方法驱动了 (👈点击直达) css绘制一个Pinia小菠萝 (👈点击直达) element table列表根据数据设置背景色 (👈点击直达) vue3使用百度地图 (👈点击直达) 。
如果觉得这篇文章对你有帮助,欢迎点赞👍、收藏💖、转发✨哦~ 。
最后此篇关于带你走过动态表单的那些坑的文章就讲到这里了,如果你想了解更多关于带你走过动态表单的那些坑的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我在 mongodb 中的玩家和锦标赛之间存在多对多关系。 我希望能够一次将许多玩家添加到锦标赛中。如果没有 ajax,这很简单,但我们有一个包含数千名玩家的数据库,因此表单选择变得巨大。 我们想为此
这个问题已经有答案了: When should I use html's and when spring's in Spring MVC web app? (3 个回答) 已关闭 6 年前。 我正
我正在 C++ Builder XE4 上使用 VCL。 我有以下组件。 FormMain 具有 TButton *B_select; FormSelect(或DialogSelect)具有 TCom
如何在不影响表单控件的情况下更改表单的 alphablend? 德尔福XE7 最佳答案 此问题的一个解决方案是使用多设备应用程序(如果无法使用VCL)。 如果您需要保留透明的TForm,只需更改属性T
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我正在尝试扩展 Django 注册以包含我自己的注册表单。原则上这是相当简单的。我只需要编写自己的表单( CustomRegistrationForm ),它是原始表单( RegistrationFo
我正在尝试为我的网站实现聊天功能。为了做到这一点,我遵循了以下教程:https://channels.readthedocs.io/en/latest/tutorial/ 然后我稍微更改了代码以实现它
有一个问题,我需要用一个 html 表单提交两个相互关联的模型表单。我知道如何提交两个单独的表格,但是在相关模型表格的情况下外键让我发疯。 问题是,第二个表单应该用外键填充字段到第一个表单的实例。 在
我正在创建一个工具,允许某人输入食谱,然后将其保存为 XML 文件,我已经创建了 XSD,但我想知道如何在我的网页上制作一个表单以允许用户输入他们的食谱并遵守模式。我一直在研究 Ajax 和 Jque
在 .net win 表单(如 asp.net web 表单)中是否有可用的验证控件? 因为很难为我的每个控件设置正确的条件,所以我的表单中也有很多重复的代码。 正确的做法是什么? 最佳答案 看看这个
我有一个简短的问题。我正在学习如何使用 javascript 制作注册表,发现此链接非常有用。 http://www.w3resource.com/javascript/form/javascript
我正在开发一个项目,该项目将使用循环将许多表单添加到 mysql 数据库中。在 javascript 部分中,我无法让 var i 在函数 updatesum() 中工作。有人可以帮我吗? 我试图避免
在我的应用程序上有一个包含 2 个字段和一个保存按钮的表单。 在我的 onClick 结束时我需要什么来将光标返回到第一个字段。 我有这个来清除它们 txtData.setText("
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
<input type="text" name="textfield" onKeyPress="javascript:alert(event.
我正在构建的网站有一个登录表单,作为所有其他模板扩展的 base.html 模板的一部分;因此,我需要以某种方式处理每个页面上的登录/注销逻辑。 目前每个页面都在单独的 View 中加载,那么实现它的
我有一个表单类,看起来像.. #forms.py class ExampleForm(forms.Form): color = forms.CharField(max_length=25)
有没有办法在表单定义中给表单一个特殊的错误渲染函数?在 customizing-the-error-list-format 下的文档中它展示了如何为表单提供特殊的错误呈现函数,但似乎您必须在实例化表单
我正在处理由多个页面组成的表单,我想解决验证问题。 当我点击提交按钮时,当前页面上的所有字段都会在下方显示错误消息,但是如果我更改页面,那么我需要再次点击提交,因为这些字段未设置为已触摸。 如果我可以
是否可以附加到继承表单的 exclude 或 widgets 变量? 到目前为止,我有以下设置。 class AddPropertyForm(forms.ModelForm): num_mon
我是一名优秀的程序员,十分优秀!