材料表 - 使多个选定行可编辑

时间:2020-12-22 10:26:26

标签: reactjs material-ui material-table

我正在使用材料表,我的要求是在选择它们后使行可编辑,我不是在寻找使所有行都可编辑的批量编辑,我只是​​希望选定的行可编辑但我面临的问题是材料table 允许一行或所有行都是可编辑的,我尝试了下面的代码,但它只使 changeRowEditing 方法被称为可编辑的最后一行,有没有办法使多行可编辑? >

<MaterialTable
        columns={columnOptions}
        data={props.values}
        tableRef = {materialTableRef}
        onSelectionChange={(rows) => {
            console.log('---rows---', rows);
            alert('You selected ' + rows.length + ' rows')}}
        actions={[
            {
              tooltip: 'Edit selected rows',
              icon: 'edit',
              onClick: (evt, data:any) => {
                const materialTable:any = materialTableRef.current;
                // only data[1] is editable
                materialTable.dataManager.changeRowEditing(data[0],"update");
                materialTable.dataManager.changeRowEditing(data[1],"update");
                materialTable.setState({
                ...materialTable.dataManager.getRenderState()
            });
            }
            }
          ]}
        options={{
            actionsColumnIndex: -1,
            showTitle: false,
            paging: false,
            search: false,
            tableLayout: 'fixed',
            maxBodyHeight: '50vh',
            selection: true,
            headerStyle: {
                borderTopWidth: '1px',
                borderBottomWidth: '1px',
                borderTopStyle: 'solid',
                borderBottomStyle: 'solid',
                borderTopColor: colors.gray40,
                borderBottomColor: colors.gray40,
                fontWeight: 'bold',
                color: colors.gray90,
                position: 'sticky'
            },
            
        }}
        components={{
            Container: props => (
                <div {... props}></div>
            )
        }}
    />

0 个答案:

没有答案