javascript - 当我编辑时在 Material 表中渲染一个开关按钮

Question

大家好，我正在使用 Material 表:(开关来自 Material 用户界面，一个简单的切换按钮)

columns: {[{ title: 'Name', field: 'name' },
          { title: 'Status', field: 'status', type: 'boolean', render: rowData => <Switch checked=  {rowData.active}/>*/}
        ]}
        data: {[
            { name: 'Mickey', status: false },
            { name: 'Pippo', status: true}]}

当我点击编辑按钮而不是切换组件时，会出现一个复选框组件(我认为它是 Material 表中 bool 类型列的默认设置)，是否可以更改它？

Answer 1

使用 editComponent 和 render 应该可以满足您的要求。

{
  title: "Status",
  field: "status",
  editComponent: (rowData) => {
    return <Switch checked={false} inputProps={{ "aria-label": "controlled" }} color="primary" />;
  },
  render: (rowData) => {
    return (
      <Switch
        checked={rowData.status}
        onChange={handleChange}
        inputProps={{ "aria-label": "controlled" }}
        color="primary"
      />
    );
  }
}