如何移除Material Table批量编辑字段的默认占位符
移除Material Table批量编辑的占位符
要将批量编辑弹窗里的输入框占位符设为空,只需在列定义中添加editProps配置,把placeholder设为空字符串即可,文本、数字、下拉选择等不同类型字段均适用。修改后的代码如下:
function BulkEdit() { const { useState } = React; const [columns, setColumns] = useState([ { title: 'Name', field: 'name', editProps: { placeholder: '' } // 清空占位符 }, { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value', editProps: { placeholder: '' } }, { title: 'Birth Year', field: 'birthYear', type: 'numeric', editProps: { placeholder: '' } }, { title: 'Birth Place', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }, editProps: { placeholder: '' } }, ]); const [data, setData] = useState([ { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 }, { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 }, ]); return ( <MaterialTable title="Bulk Edit Preview" columns={columns} data={data} editable={{ onBulkUpdate: changes => new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000); }), onRowDelete: oldData => new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000); }), }} /> ) }
如果需要全局统一清空所有列的批量编辑占位符,也可以通过自定义components覆盖批量编辑的输入组件,但单列配置的方式更灵活,适合按需调整。
内容的提问来源于stack exchange,提问作者devashish masram
相关产品推荐
相关产品推荐

