如何在material-table中将指定列的内容设为输入字段？

看你需要的是那种输入框+增减按钮+单位下拉的单元格编辑组件，默认的cellEditable属性只能提供基础输入，得靠自定义编辑器来实现。下面以常用的ag-Grid为例给出方案：

步骤1：编写自定义编辑器类 #

直接构建包含所需控件的DOM结构，绑定交互逻辑：

class CustomUnitEditor {
    init(params) {
        // 搭建容器
        this.wrapper = document.createElement('div');
        this.wrapper.style.display = 'flex';
        this.wrapper.style.gap = '4px';
        this.wrapper.style.alignItems = 'center';

        // 数值输入框
        this.numberInput = document.createElement('input');
        this.numberInput.type = 'number';
        this.numberInput.style.width = '70px';
        // 从现有值拆分出数字部分
        this.numberInput.value = params.value ? params.value.split(' ')[0] : 0;

        // 单位下拉框
        this.unitSelect = document.createElement('select');
        ['kg', 'g', 'lb'].forEach(unit => {
            const opt = document.createElement('option');
            opt.value = unit;
            opt.textContent = unit;
            this.unitSelect.appendChild(opt);
        });
        // 选中现有单位
        if (params.value) {
            this.unitSelect.value = params.value.split(' ')[1];
        }

        // 增减按钮组
        const btnGroup = document.createElement('div');
        btnGroup.style.display = 'flex';
        btnGroup.style.flexDirection = 'column';
        
        const plusBtn = document.createElement('button');
        plusBtn.textContent = '+';
        plusBtn.style.padding = '2px 6px';
        plusBtn.addEventListener('click', () => {
            this.numberInput.value = parseInt(this.numberInput.value) + 1;
        });

        const minusBtn = document.createElement('button');
        minusBtn.textContent = '-';
        minusBtn.style.padding = '2px 6px';
        minusBtn.addEventListener('click', () => {
            if (parseInt(this.numberInput.value) > 0) {
                this.numberInput.value = parseInt(this.numberInput.value) - 1;
            }
        });

        btnGroup.appendChild(plusBtn);
        btnGroup.appendChild(minusBtn);

        // 组装所有控件
        this.wrapper.appendChild(this.numberInput);
        this.wrapper.appendChild(this.unitSelect);
        this.wrapper.appendChild(btnGroup);
    }

    getGui() {
        return this.wrapper;
    }

    getValue() {
        // 返回拼接后的完整值
        return `${this.numberInput.value} ${this.unitSelect.value}`;
    }

    destroy() {
        this.wrapper.remove();
    }
}

步骤2：在表格列配置中启用自定义编辑器 #

把列的cellEditor指定为我们写的类，同时开启动态编辑：

const columnDefs = [
    {
        headerName: '重量',
        field: 'weight',
        editable: true,
        cellEditor: CustomUnitEditor,
        cellRenderer: params => params.value || '0 kg'
    }
];

// 初始化ag-Grid
new agGrid.Grid(document.getElementById('gridContainer'), {
    columnDefs,
    rowData: [{ weight: '10 kg' }],
    defaultColDef: { flex: 1, minWidth: 180 }
});

其他表格库的适配思路 #

如果用的是Element UI Table、Ant Design Table这类组件，核心逻辑一样：

• 关闭组件自带的单元格编辑
• 自定义单元格模板，嵌入输入框、按钮和下拉组件
• 给按钮绑定增减事件，同步更新数据即可

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