<el-form
ref="dataForm"
:model="Data"
label-position="left"
label-width="90px"
>
<el-form-item
v-for="(item, index) in dan"
:key="index"
:label="item['标签']"
>
<p
v-for="(t, x) in item['单数']"
:key="'ds' + x"
>
单{{ t }}
<el-input
v-for="(i, k) in item['小单数']"
:key="k"
v-model=""
"
/>
</p>
</el-form-item>
</el-form>
export default {
name: 'App',
data() {
return {
dan {
1: {
'标签': ‘大单 1’,
'单数': 2,
'小单数': 3
},
2: {
'标签': ‘大单 2’,
'单数': 3,
'小单数': 5
}
}
}
}
}
1
chengxy 2022-02-28 02:28:03 +08:00
可以参考各种 form render 的实现方式
|
2
MacDows 2022-02-28 02:37:44 +08:00 via Android
遇到了类似的问题
https://v2ex.com/t/832529#reply9 我最后是把这些嵌套变成一个列表,加一个 Level 值标记层数 然后就好多了,vue 新手也能写了 要不然循环嵌套会很复杂 这肯定不是最优方案,抛砖引玉,欢迎大佬指点 |
3
murmur 2022-02-28 07:47:52 +08:00
vmodel 是可以写变量的,提前生成一个数组或者 object
|
4
murmur 2022-02-28 07:48:37 +08:00
拿不到数据大概率是你绑定的变量没有提前生成好,不行就$set 一波,反正响应式得建立起来
|
6
cxe2v 2022-02-28 09:59:32 +08:00
<el-input
v-for="(i, k) in item['小单数']" :key="k" v-model="" " /> 你这里为什么是 in item['小单数']",应该是 in t['小单数']吧 |
7
konakona 2022-02-28 10:29:00 +08:00
v-for 可以拼接。
参考: <el-input v-model="form.package_goods[scope.$index].quantity" clearable placeholder=""></el-input> |
8
konakona 2022-02-28 10:29:12 +08:00
打顺手了,是 v-model 可以拼接。
|
9
konakona 2022-02-28 10:31:38 +08:00
像你使用 v-for 循环来拼接 v-model 可以直接用 v-for 绑定的值,你的是第一层 el-form-item 的 v-for 里的 item ,第一层的 el-input v-model 可以是:v-model="item.字段名称" 。第二层的 v-for 的是 t ,v-model 可以是:v-model="t.字段名称",第三层如此类推。
|