mui-datatables自定义启用/禁用行选择功能实现咨询

方案1：直接通过dataIndex访问原始数据源（无排序/过滤场景） #

isRowSelectable返回的dataIndex和你传入组件的data数组下标完全对应，你可以直接用这个索引读取原始行数据做判断：

// 你的原始表格数据源
const tableData = [
  { id: 1, name: '示例1', status: 'active' },
  { id: 2, name: '示例2', status: 'inactive' },
  // 其他数据...
]

const tableOptions = {
  isRowSelectable: (dataIndex) => {
    const currentRow = tableData[dataIndex]
    // 仅status为active的行允许选择
    return currentRow.status === 'active'
  },
  // 其余表格配置...
}

方案2：适配前端排序/过滤/分页场景 #

如果你的表格做了前端排序、过滤、分页，传入组件的是加工后的数据，直接用原始数据源的索引会对应不上，这时候你可以直接读取加工后的数据源：

// 经过过滤/排序/分页处理后，最终传给MuiDataTable的数据源
const processedData = getProcessedTableData(originalData)

const tableOptions = {
  isRowSelectable: (dataIndex) => {
    const currentRow = processedData[dataIndex]
    return currentRow.status === 'active'
  },
  // 可选：给不可选的行添加禁用样式，提升交互感知
  customRow: (rowData) => {
    if (rowData.status === 'inactive') {
      return {
        style: {
          opacity: 0.6,
          cursor: 'not-allowed'
        }
      }
    }
    return {}
  }
}

服务端分页场景适配 #

如果是服务端分页，dataIndex对应当前页返回的数据源下标，直接读取当前页的数据集对应索引的行数据做判断即可，逻辑和上述方案一致。

内容的提问来源于stack exchange，提问作者Guilherme Hepfener