编辑时在材质表中渲染一个开关按钮

Question

大家好，我正在使用材料表：（开关来自 material-ui，一个简单的切换按钮）

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}]}

当我点击编辑按钮而不是开关组件时出现一个复选框组件（我认为它是材料表中布尔类型列的默认值），是否可以更改它？

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"
      />
    );
  }
}