Material Table编辑行时如何实现多选并将选中值追加到Tank列

Material Table 原生基于lookup渲染的选择器默认是单选模式，要实现多选追加值到Tank列的效果，需要自定义列的编辑组件，具体修改方式如下：

1. 将原Select列的lookup配置移除，替换为自定义editComponent，引入Material UI的多选Select组件实现多选交互
2. 选中项变化时，将选中值数组拼接为字符串，同步更新到绑定的tankNo字段，自动填充到Tank列
3. 编辑回显时，将Tank列已存储的字符串按分隔符拆分为数组，作为多选组件的默认选中值

完整修改后的代码 #

// 按需引入Material UI对应组件
import { Select, MenuItem, Checkbox, ListItemText } from '@material-ui/core';

// 抽离选项配置，方便多场景复用
const tankOptions = { 'test1': 'select1', 'test2': 'select2' };

const columns = [
  {
    title: "Level",
    field: 'sequence',
    editable: 'onAdd',
  },
  {
    title: 'Tank',
    field: 'tankNo',
    // 建议设置为不可手动编辑，保证值完全由多选器同步，避免数据混乱
    editable: 'never',
  },
  {
    title: "Select ",
    field: 'tankNo',
    // 自定义编辑态的多选组件
    editComponent: (props) => {
      // 回显逻辑：将已存储的字符串拆分为选中值数组
      const currentSelected = props.value ? props.value.split(',') : [];

      return (
        <Select
          multiple
          fullWidth
          value={currentSelected}
          onChange={(e) => {
            // 选中值拼接为逗号分隔的字符串，同步更新到行数据
            const mergedValue = e.target.value.join(',');
            props.onChange(mergedValue);
          }}
          // 下拉输入框展示选中项的label文本
          renderValue={(selected) => 
            selected.map(val => tankOptions[val]).join(', ')
          }
        >
          {Object.entries(tankOptions).map(([val, label]) => (
            <MenuItem key={val} value={val}>
              <Checkbox checked={currentSelected.indexOf(val) > -1} />
              <ListItemText primary={label} />
            </MenuItem>
          ))}
        </Select>
      )
    }
  }
];

可选调整项 #

• 如果需要用其他分隔符拼接字符串（比如/、;），把代码里split(',')和join(',')的逗号替换为对应符号即可
• 如果需要允许用户手动编辑Tank列，移除Tank列配置里的editable: 'never'即可
• 如果不需要多选选项前的勾选框，移除<Checkbox />标签即可

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