如何在Shiny应用侧边面板实现条件显示输入控件并生成表格

核心逻辑说明 #

根据selected_type的选择值，通过conditionalPanel()实现侧边栏输入控件的条件显示：

• 选择NoMeal：隐藏vegan和nonvegan控件
• 选择Vegan：仅显示vegan控件
• 选择NonVegan：仅显示nonvegan控件

完整代码实现 #

library(shiny)
library(DT)

ui <- fluidPage(
  titlePanel("餐食类型选择与数据表格"),
  sidebarLayout(
    sidebarPanel(
      selectInput(
        inputId = "selected_type",
        label = "选择餐食类型",
        choices = c("NoMeal", "Vegan", "NonVegan"),
        selected = "NoMeal"
      ),
      # 条件显示素食餐输入控件
      conditionalPanel(
        condition = "input.selected_type == 'Vegan'",
        numericInput(
          inputId = "vegan",
          label = "素食餐数量",
          value = 0,
          min = 0
        )
      ),
      # 条件显示非素食餐输入控件
      conditionalPanel(
        condition = "input.selected_type == 'NonVegan'",
        numericInput(
          inputId = "nonvegan",
          label = "非素食餐数量",
          value = 0,
          min = 0
        )
      )
    ),
    mainPanel(
      DTOutput("meal_table")
    )
  )
)

server <- function(input, output) {
  # 动态生成数据表格
  output$meal_table <- renderDT({
    # 根据选择构建对应数据
    if (input$selected_type == "NoMeal") {
      df <- data.frame(
        餐食类型 = "无餐食",
        数量 = 0,
        备注 = "未选择任何餐食类型"
      )
    } else if (input$selected_type == "Vegan") {
      df <- data.frame(
        餐食类型 = "素食餐",
        数量 = input$vegan,
        备注 = ifelse(input$vegan > 0, "已确认素食餐订单", "未订购素食餐")
      )
    } else {
      df <- data.frame(
        餐食类型 = "非素食餐",
        数量 = input$nonvegan,
        备注 = ifelse(input$nonvegan > 0, "已确认非素食餐订单", "未订购非素食餐")
      )
    }
    
    # 格式化表格样式
    datatable(
      df,
      options = list(
        dom = 't',
        pageLength = 1,
        ordering = FALSE
      ),
      rownames = FALSE,
      style = "bootstrap"
    ) %>%
      formatStyle(
        columns = 1:3,
        textAlign = "center",
        fontSize = "14px"
      ) %>%
      formatStyle(
        "备注",
        color = styleEqual(
          c("已确认素食餐订单", "已确认非素食餐订单"),
          c("green", "blue")
        )
      )
  })
}

shinyApp(ui, server)

关键细节说明 #

• 条件显示实现：conditionalPanel()通过JavaScript表达式input.selected_type == 'XXX'判断控件是否渲染，是Shiny中UI元素条件显示的高效方案
• 表格样式控制：使用DT包的formatStyle()设置表格对齐方式、字体大小，通过styleEqual()给不同状态的备注文本设置对应颜色，匹配需求中的样式效果
• 动态数据生成：在服务器端根据selected_type的不同值构建对应数据框，确保表格内容与用户选择同步更新

内容的提问来源于stack exchange，提问作者JontroPothon