本文解决Vue项目中动态渲染Input组件时数据不实时更新的问题，通过添加$forceUpdate()强制刷新解决。同时介绍了在拼团后台项目中，根据后端返回的列表动态渲染表格列（如不同人数团的价格表头）的实现方法，涉及动态生成el-table-column及数据绑定。
在Vue项目中动态渲染input组件时，常遇到绑定的参数无法实时更新的问题。
具体场景是，需要根据后端返回的列表数据动态渲染选项，并将用户输入的参数回传给后端。
然而在实际操作中，发现输入框内虽然进行了输入，但界面并未显示内容，且底层数据未能正确更新。
针对该问题，可以在input组件上添加一个刷新数据的处理逻辑来解决。
@input="$forceUpdate()"<div v-if="doubleChild.lenght!=0&&radio === 1">
<template v-for="( item,index ) in doubleChild" >
<el-form-item :label="item.text" :key="index">
<el-input
@input="$forceUpdate()"
placeholder="请输入内容"
v-model="item.inputKey">
</el-input>
</el-form-item>
</template>
</div>
此外，Vue动态渲染表格也是常见需求。
项目场景
在拼团后台管理系统中，需要配置参团SKU，即设定开团人数。不同开团人数对应不同的价格策略。
因此，需要动态渲染表格的列，例如根据开团类型动态生成“2人团价格”和“3人团价格”等表头。
需求描述
当后台管理员选择开团类型后，在设置关联商品的SKU时，系统需动态渲染出该类型对应的价格列。
具体效果如SKU设置界面所示。
相关代码实现如下。
<el-table
ref="multipleTable"
:data="skuTableData"
tooltip-effect="dark"
style="width: 100%"
border
>
<el-table-column prop="id" label="SKU编号" width="120" align="center">
</el-table-column>
<el-table-column
prop="sku_attr_text"
label="规格"
width="120"
align="center"
>
</el-table-column>
<el-table-column prop="address" label="价格" align="center">
</el-table-column>
<el-table-column prop="stock" label="库存" align="center">
</el-table-column>
//动态渲染的表格列
<el-table-column
:label="item.val"
v-for="(item, index) in tableHead"
:key="index"
>
<template scope="scope">
<el-input
size="small"
v-model="scope.row[item.item]"
placeholder="0"
type="number"
></el-input>
</template>
</el-table-column>
</el-table>
tableHead:[
{ val: "2人团价格", item: "target1" },
{ val: "3人团价格", item: "target2" },
] 这里涉及一个数组定义。
skuTableData:[
{target1:1},
{target2:2}
]表格的行数据主要确保数据与列头正确对应。
总结
以上为个人经验分享，希望能为大家提供参考，也希望大家多多支持本站。