如何禁用基于行数据的操作按钮???
我正在使用具有远程数据功能的material-table
。
我必须禁用图标:当 rowdata.status
被取消时构建。
我试图查看文档,但没有帮助。我也试过检查 StackOverflow 的答案,但没有成功
这是我的代码。请帮助修复它。
提前致谢
<MaterialTable
icons={tableIcons}
tableRef={this.tableRef}
title="Your Rollouts"
options={{
actionsColumnIndex: -1,
search: true
// pageSize: 10,
// pageSizeOptions: [10, 20, 50]
}}
columns={[
{
title: "Rollout ID",
field: "_id"
},
{ title: "Status", field: "rolloutStatus" },
{ title: "Created By", field: "createdby" },
{ title: "Created Date", field: "CreatedDate", type: "datetime" },
{ title: "Updated Date", field: "updateddate", type: "datetime" },
{ title: "CRQ Number", field: "crqnumber" }
]}
actions={[
{
icon: () => <Refresh />,
tooltip: "Refresh Data",
isFreeAction: true,
onClick: () => this.tableRef.current.onQueryChange()
},
{
icon: () => <Build />,
tooltip: "Perform action",
onClick: (event, rowData) => {
this.setState({ visible: true });
}
},
{
icon: () => <Visibility />,
tooltip: "View Rollout",
onClick: (event, rowData) => {
alert(rowData.xml);
}
}
]}
data={query =>
new Promise((resolve, reject) => {
let url = "http://localhost:5000/getRollout?";
if (query.search) {
url += "querysearch=" + query.search;
url += "&per_page=" + query.pageSize;
url += "&page=" + (query.page + 1);
fetch(url)
.then(response => response.json())
.then(result => {
console.log(result.data);
resolve({
data: result.data.filter(pub => pub._id.includes(query.search)),
page: result.page - 1,
totalCount: result.total
});
});
} else {
url += "per_page=" + query.pageSize;
url += "&page=" + (query.page + 1);
if (query.orderBy) {
let sortOrder = query.orderDirection;
url += "&sort=" + query.orderBy.field + "&sortOrder=" + sortOrder;
}
console.log(url);
fetch(url)
.then(response => response.json())
.then(result => {
console.log(result);
resolve({
data: result.data.filter(pub => pub._id.includes(query.search)),
page: result.page - 1,
totalCount: result.total
});
});
}
console.log(url);
console.log(query.orderBy);
console.log(query.orderDirection);
})
}
/>;
最佳答案
它在文档中。您可以在这里查看:https://material-table.com/#/docs/features/actions条件 Action 示例
假设您想禁用您的第一个操作,代码将类似于:
rowData => ({
disabled: rowData.status === 'canceled',
icon: () => <Refresh />,
tooltip: "Refresh Data",
isFreeAction: true,
onClick: () => this.tableRef.current.onQueryChange()
})
关于javascript - Material 表:如果我的 rowdata.status = canceled,如何更改禁用操作按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60587012/