您现在的位置是：网站首页> 编程资料编程资料
vue选择下拉框动态变化表单方式_vue.js_
2023-05-24
344人已围观
简介 vue选择下拉框动态变化表单方式_vue.js_
vue选择下拉框动态变化表单
场景
一个表单，在选择某个下拉框时，动态添加选中该下拉框值对应的输入框或下拉框等。相当于有部分输入框或下拉框是动态变化的。
注意
如果要验证动态生成的表单，可以单独添加 :rules="{ required: true, message:KaTeX parse error: Expected 'EOF', got '}' at position 46: …gger: 'change' }̲"`。`prop` 要写成对应…{item}" 才会生效。
使用 Object.keys(ruleForm.info) 来遍历是为了防止动态生成的表单不具有唯一性，即输入某一项值，其余输入框也会填入相同的值。
data() { return { ruleForm: { type: '', name: '', remark: '', info: {} }, rules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ] }, curForm: [], typeList: [] // 数据源类型 } }, methods: { // 选择不同的接入方式，输出不同的输入框 changeType(val) { this.ruleForm.info = {} this.typeList.forEach(item => { if (item.type === val) { this.curForm = item.props } }) this.curForm.forEach(item => { this.$set(this.ruleForm.info, item.field, '') }) }, // 根据 key 获取 label getNameByKey (key) { return this.curForm.find(item => item.field === key).label }, // 根据 key 获取 options getNameByOptions (key) { return this.curForm.find(item => item.field === key).options } }数据格式不同的话，学会灵活变换
vue动态增减表单项
如图，实现以下效果
通过点击新增就会新增一个表单，删除会删除最后一个表单，也可以指定删除哪个表单
代码实现
淘宝 京东 天猫 拼多多 其他 新增 删除
method中
// 添加表单 add() { const item = { settledType: '', settledPlatfoem: '', shopName: '', shopUrl: '', operatingLicense: '' } this.shopArr.push(item) }， // 删除表单 deleteShop() { this.shopArr.splice(this.shopArr.length - 1, 1) }, 以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的文章:
