动态表单动态渲染问题？-灵析社区
抠香糖在Vue2环境中，有一个动态表单，数据源如下： list: [ { name: '姓名', props: 'name', show: [] }, { name: '年龄', props: 'age', show: [] }, { name: '身高', props: 'height', show: [] }, { name: '是否合格', props: 'isPass', show: [ { key: 'age', symbol: '=', value: 180 }, ], value: '' } ], formData: { name: '', age: '', height: '', isPass: '' }, 要实现的功能是：每个表单项根据其对象里的show来判断是否显示，如果show为空数组，代表无条件限制。 比如是否合格这一项，只有在 **年龄 =180** 时才显示。 测试渲染代码如下： {{ item.name }} 请问下一步该如何进行？
我只爱钱
{{ item.name }}
export default {
data() {
return {
list: [
{ name: '姓名', props: 'name', show: [] },
{ name: '年龄', props: 'age', show: [] },
{ name: '身高', props: 'height', show: [] },
{
name: '是否合格',
props: 'isPass',
show: [
{ key: 'age', symbol: '=', value: 180 },
],
value: ''
}
],
formData: { name: '', age: '', height: '', isPass: '' },
};
},
methods: {
shouldShow(item) {
if (item.show.length === 0) {
return true;
}
return item.show.every(condition => {
const formValue = this.formData[condition.key];
switch (condition.symbol) {
case '=':
return formValue >= condition.value;
default:
return false;
}
});
}
}
};