开发者社区> 问答> 正文

宜搭自定义页面使用表单数据进行循环渲染,但是有一个文本中需要使用条件渲染,但是其他表单的变量,怎么办

就是在使用自定义页面使用表单数据进行循环渲染,使用state.dp1.data进行数据的循环,但其中有一个文本需要进行条件渲染,但该条件渲染需要使用其他表单的数据,怎么办

展开
收起
游客43nbxlybuyfmu 2023-04-30 16:52:25 420 0
3 条回答
写回答
取消 提交回答
  • 在宜搭自定义页面中,如果需要在循环渲染表单数据时对一个文本进行条件渲染,可以使用条件计算公式来实现。

    假设您需要对一个文本进行条件渲染,同时该文本需要使用循环渲染表单数据时的某个变量,可以按照以下步骤进行操作:

    1. 在页面中插入一个文本元素,在文本框内填写需要进行条件渲染的文本内容。

    2. 在文本框内,使用条件计算公式进行条件渲染,如下所示:

    IF(表单变量=条件值,"满足条件的文本内容","不满足条件的文本内容")+表单循环变量
    

    其中,表单变量为需要进行条件判断的表单变量,条件值为需要进行比较的条件值,满足条件的文本内容和不满足条件的文本内容是在条件判断为真和为假时需要输出的文本内容,表单循环变量为在循环中需要进行渲染的表单变量。

    1. 如果需要对多个表单变量进行条件渲染,可以将多个条件计算公式进行组合。

    例如,假设您需要判断表单变量A和表单变量B的值,满足条件时输出文本内容C,不满足条件时输出文本内容D,并将文本内容与表单循环变量E进行拼接,可以使用以下公式:

    (IF(表单变量A=条件值1,IF(表单变量B=条件值2,"文本内容C","文本内容D"),IF(表单变量B=条件值2,"文本内容D","文本内容D")))+表单循环变量E
    

    在上述公式中,条件值1和条件值2分别为需要进行比较的条件值,文本内容C为满足条件时需要输出的文本内容,文本内容D为不满足条件时需要输出的文本内容,表单循环变量E为在循环中需要进行渲染的表单变量。

    通过使用条件计算公式,可以在宜搭自定义页面中方便地进行条件渲染,同时进行循环渲染表单数据。

    2023-04-30 23:06:26
    赞同 展开评论 打赏
  • 可以使用JavaScript来实现条件渲染,通过监听其他表单元素的变化,来动态改变需要渲染的文本内容。

    具体实现方式如下:

    1.在需要进行条件渲染的文本所在的标签中,添加一个id属性,例如:

    <p id="text-1">这是需要渲染的文本</p >
    

    2.在其他表单元素中添加onChange事件,例如:

    <input type="text" id="input-1" onChange="changeText()">
    

    3.在JavaScript中编写changeText函数,监听表单元素的变化,根据需要渲染的条件动态改变文本内容,例如:

    function changeText() {
        var input1Value = document.getElementById("input-1").value;
        var text1 = document.getElementById("text-1");
        if (input1Value === "xxx") {
            text1.innerHTML = "条件成立,需要渲染的内容";
        } else {
            text1.innerHTML = "条件不成立,不需要渲染的内容";
        }
    }
    

    这样就可以通过JavaScript动态渲染需要渲染的文本内容。需要注意的是,JavaScript中获取表单元素的值和标签内容的方式可能会因框架而异,需要根据具体情况进行调整。

    2023-04-30 21:07:33
    赞同 展开评论 打赏
  • 十年摸盘键,代码未曾试。 今日码示君,谁有上云事。

    宜搭自定义页面条件渲染。可以直接设置渲染或者不渲染,也可以绑定变量来响应式渲染。您可以通过以下路径设置:

    【电脑钉钉】-【宜搭】-【我的应用】-【进入对应应用】-【进入对应自定义页面】-【点击组件】- 右侧【高级】- 【变量绑定图标】按照需求设置即可。

    【温馨提示】:配置条件,如果不渲染,则通过 API this.$('fieldId') 来获取的控件实例为 null。

    2023-04-30 17:17:14
    赞同 1 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载