如何解决反应:运行应用程序构建后如何在mui-datatable中保留操作图标列
在我的React应用中,我在表中使用 mui-datatable 。我创建了一个名为Actions
的新列,其中包含 Material-UI Edit and Delete 图标。
当我在开发模式下运行该应用程序时,图标显示良好。当我部署应用程序时出现问题,即使用build
中的npm run build
react文件,我部署的 edit 和 delete 图标消失了网络应用。我的方法行不通。
Mui数据表
const InvoiceTable = (props) => {
const classes = useStyles();
const columns = [
{ name: "invoiceNo",label: "Invoice No" },{ name: "product",label: "Product" },{
name: "Actions",<====== New column
options: {
customBodyRender: (value,tableMeta,updateValue) => {
// const i = tableMeta.rowIndex;
// const data = this.state.employeesDetail;
return (
// OPEN MODAL
<div>
<Tooltip title="Edit">
<EditIcon <====== EDIT ICON
color="action"
onClick={() => alert("Under Construction")}
/>
</Tooltip>
<Tooltip title="Delete"> <====== DELETE ICON
<DeleteOutlineIcon
style={deleteIcon}
color="action"
onClick={() => alert("Under Construction")}
/>
</Tooltip>
</div>
);
},},];
return (
<div className={classes.root}>
<MUIDataTable
title={
<Fragment>
Purchase Invoice
<Tooltip title="Add">
<AddBoxIcon
color="action"
style={addIcon}
onClick={() => dispatch(toggleModal())}
/>
</div>
);
...
export default InvoiceTable;
const options = {
filterType: "checkbox",rowsPerPage: 5,rowsPerPageOptions: [5,10,15,20],downloadOptions: { filename: "InvoiceData.csv",separator: "," },elevation: 6,selectableRows: false,};
部署前后的图像
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。