【Vue】jsx种遍历输入框map循环中使用if判断

数据格式

                containText: [
                    {
                        title: "test1",
                        bindKey: "test1",
                        type: 'text'
                    },
                    {
                        title: "test2",
                        type: 'select', // 输入框属性
                        selectData: 'test22', // 下拉数据列表
                        bindKey: "test2",
                    },
                    {
                        title: "test3",
                        type: 'textarea',
                        bindKey: "test3",
                        rows: 3,
                    },
                ]

遍历

this.containText.map((item, index) => {
                if(item.type === 'text'){ // 如果是文本框
                    return (
                        <el-form-item label-width={"120px"} prop={item.bindKey} label={item.title}>
                        <el-input
                            placeholder={`请输入${item.title}`}
                            v-model={this.ruleForm[item.bindKey]}
                            />       
                        </el-form-item>
                    )
                } else if(item.type === 'textarea'){ // 如果是textarea
                    return (
                        <el-form-item label-width={"120px"} prop={item.bindKey} label={item.title}>
                        <el-input
                            placeholder={`请输入${item.title}`}
                            v-model={this.ruleForm[item.bindKey]}
                            type="textarea"
                            rows={item.rows}
                        />       
                        </el-form-item>
                    )
                }else if(item.type === 'select'){ // 如果是下拉框
                    return (
                        <el-form-item label-width={"120px"} prop={item.bindKey} label={item.title} >
                        <el-select filterable v-model={this.ruleForm[item.bindKey]}>
                            {this[item.selectData].map((selectItem) =>{
                                return(
                                <el-option
                                    key={selectItem.groupId}
                                    label={selectItem.name}
                                    value={selectItem.groupId}>
                            </el-option>
                            )
                            })}
                        </el-select>        
                    </el-form-item>
                    )
                }
            });