You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.24 07:05:31