Question

我已经在选项选择的材料表中有我的复选框：true 我想知道如何在我单击表刷新时使它们工作，这里有人可以帮助我解决这个问题吗？我会很感激

function DataTable() {
const [data, setData] = useState([]);
const columns = [
    { title: 'Data', field: 'hora' },
    { title: 'Paciente', field: 'clientName' },
    { title: 'Médico Veternário', field: 'vet.name' },
    { title: 'Estado', field: 'appointmentState' },
];

const tableIcons = {
    DetailPanel: forwardRef((props, ref) => (
        <ChevronRight {...props} ref={ref} />
    )),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => (
        <ChevronLeft {...props} ref={ref} />
    )),
};

useEffect(() => {
    fetch('teste.com')
        .then((resp) => resp.json())
        .then((resp) => setData(resp));
});

return (
    <div style={{ height: 400, width: '100%' }}>
        <MaterialTable
            icons={tableIcons}
            title='Lista Consultas'
            data={data}
            columns={columns}
            options={{
                search: false,
                sorting: true,
                selection: true,
                paging: true,
                pageSize: 5,
                tableLayout: 'auto',
                toolbar: false,
                rowStyle: {
                    backgroundColor: '#FFF',
                    fontSize: '100%',
                },
            }}
        />
    </div>
);}export default DataTable;

Answer 1

不确定我是否理解正确，但是，如果您想对选定的行执行操作，则可以使用自定义操作执行以下操作：

actions={[
          {
            tooltip: "Custom action on selected rows",
            icon: "refresh",
            onClick: (evt, data) => console.log("selected data: ", data)
          }
        ]}

一旦您点击右上角的按钮，您的自定义操作的 onClick 事件就会被触发，将作为 arg (data) 的对象列表传递给该函数，每个对象代表 { {1}} 个选定的行。

请注意，要立即使用此功能，rowData 选项必须为 toolbar（默认值），当然，选项 true 也必须为 {{ 1}}。

工作沙盒 here，您可以查看 docs 以获取更多示例。

希望对你有用！

材料表复选框 [React.js]

1 个答案: