Material UI - 禁用 DataGrid 中的多行选择

使用Material UI中的DataGrid组件可以方便地展示和操作表格数据。DataGrid提供了多种功能，包括多行选择。然而，有时候我们可能需要禁用多行选择功能。本文将介绍如何在DataGrid中禁用多行选择，并提供一个案例代码来演示。

禁用DataGrid中的多行选择

要禁用DataGrid中的多行选择，我们可以使用DataGrid组件的disableMultipleSelection属性。将该属性设置为true，即可禁用多行选择功能。下面是一个示例代码，演示了如何禁用DataGrid中的多行选择功能：

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';
const rows = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  { id: 3, name: 'Bob Johnson', age: 35 },
];
const columns = [
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 100 },
];
export default function MyDataGrid() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid</p>        rows={rows}
        columns={columns}
        disableMultipleSelection
      />
    </div>
  );
}

在上面的代码中，我们创建了一个名为MyDataGrid的组件，该组件使用DataGrid来展示一个包含姓名和年龄的表格数据。通过将disableMultipleSelection属性设置为true，我们禁用了多行选择功能。

案例代码演示

下面是一个完整的案例代码，演示了如何使用Material UI的DataGrid组件，并禁用其中的多行选择功能：

import React from 'react';
import { DataGrid } from '@mui/x-data-grid';
const rows = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  { id: 3, name: 'Bob Johnson', age: 35 },
];
const columns = [
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 100 },
];
export default function MyDataGrid() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid</p>        rows={rows}
        columns={columns}
        disableMultipleSelection
      />
    </div>
  );
}

在上面的案例代码中，我们创建了一个名为MyDataGrid的组件，该组件使用DataGrid来展示一个包含姓名和年龄的表格数据。通过将disableMultipleSelection属性设置为true，我们禁用了多行选择功能。

通过上述案例代码，我们可以轻松地禁用DataGrid中的多行选择功能。这在某些场景下非常有用，例如当我们只允许用户选择单行数据时。希望本文能帮助到你！