如何在Fluent UI下拉选项中实现两列布局以对齐数字与文本？

嘿，这个需求完全可以实现！Fluent UI的Dropdown组件支持自定义选项的渲染逻辑，我们可以通过onRenderOption属性来定制选项的布局，完美解决数字对齐的问题。下面是具体的实现步骤：

1. 调整选项数据结构（可选但更合理） #

首先不用提前把数字和文本拼接成字符串，保持数据的独立性会更方便后续渲染：

// 假设你的dropDownOptions是类似这样的结构
// const dropDownOptions = {
//   key1: { value: 1, label: "选项一" },
//   key2: { value: 12, label: "选项二" },
//   key3: { value: 123, label: "选项三" }
// };

let mainGroupOptions = Object.keys(dropDownOptions).map(key => {
  return { 
    key, 
    value: dropDownOptions[key].value, 
    label: dropDownOptions[key].label 
  };
});

2. 自定义选项渲染函数 #

写一个函数来渲染每个选项的两列布局，用flex实现数字右对齐、文本左对齐：

const renderCustomOption = (option) => {
  return (
    <div style={{
      display: "flex",
      justifyContent: "space-between",
      padding: "8px 12px", // 和默认选项保持一致的内边距
      width: "100%"
    }}>
      <div style={{
        textAlign: "right",
        flexShrink: 0,
        minWidth: "40px" // 给数字列设置最小宽度，确保多位数也能放下
      }}>
        {option.value}
      </div>
      <div style={{
        marginLeft: "8px",
        flexGrow: 1,
        textAlign: "left"
      }}>
        - {option.label}
      </div>
    </div>
  );
};

3. 在Dropdown中使用自定义渲染 #

把onRenderOption属性指向我们写的渲染函数即可：

<Dropdown
  label="Hauptgruppe*"
  options={mainGroupOptions}
  selectedKey={mainGroupSelected}
  errorMessage={errors.mainGroup ? "Hauptgruppe erforderlich" : ''}
  onChange={(e, option) => { 
    setMainGroupSelected(option.key); 
    deleteErrors(errors, errors.mainGroup);
  }}
  onRenderOption={renderCustomOption} // 关键：启用自定义渲染
/>

效果说明 #

这样设置后，所有数字都会靠右对齐，不管是1位、2位还是3位数，视觉上会非常整齐；文本部分靠左排列，完全解决了你之前的对齐问题。你还可以根据需求调整minWidth、内边距或者间距的数值，让布局更贴合你的设计。

备注：内容来源于stack exchange，提问作者BIKERSAN