el-table点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法

Posted 2023-04-22

参考技术A element-ui官方文档
vue官方文档

ExtJS 网格：单元格编辑：如果输入的值为 <SAMPLE>，则为空白单元格

【中文标题】ExtJS 网格：单元格编辑：如果输入的值为 <SAMPLE>，则为空白单元格

【英文标题】：ExtJS Grid: Cell Editing: Blank cell if value entered is <SAMPLE>

【发布时间】：2013-10-18 07:27:38

【问题描述】：

我在网格中使用编辑器时遇到了这个问题。 我在网上找到的几乎所有网格示例中都发现了这一点。 在具有诸如文本字段之类的编辑器的网格中，尝试输入诸如<SAMPLE> 之类的值。 在您失去焦点的那一刻，网格上会显示一个空白单元格。 但如果您再次选择它进行编辑，实际输入的文本将被保留。

在这里试试：http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.grid.plugin.CellEditing

我知道这与 html 编码/解码有关，可以在编辑事件中处理。 但我觉得这应该由网格内部处理。

如果有的话，请提出更好的解决方案？我需要在我的网格中显示这些数据，所以这是一个真正的请求。

【参考方案1】：

通常您不想在输入时转义此类数据，而是在输出时进行。这样，用户的输入在您的数据存储中保持不变。我认为这就是网格不能自己处理的原因。此外，如果您真的想的话，也不可能在网格列上使用 HTML。

我个人在网格列上提供了一个renderer，它转义了值：

renderer: function(value) 
    return Ext.util.Format.htmlEncode(value);

默认情况下，您也可以通过覆盖对所有网格列执行此操作：

Ext.override(Ext.grid.column.Column, 
    constructor: function(cfg) 
        this.callOverridden(arguments);

        if ('gridcolumn' === this.xtype && false === this.renderer) 
            this.renderer = function(value) 
                return Ext.util.Format.htmlEncode(value);
            ;
        
    
);

这会将此类渲染器添加到配置中尚未提供渲染器的所有列（在这种情况下，此渲染器将需要处理它）。

【参考方案2】：

每当我有一个单元格值为<Enter New Value> 的网格时，我也发现了这一点。

事实证明，网格不会转义单元格值以保护自己免受 HTML 标记的混淆。

一整天都在想我有一个模型/商店问题。在此处阅读更多信息：

http://www.sencha.com/forum/showthread.php?232292-Escaping-HTML-characters-in-editable-grids

这里有一个解决方法：

http://non-stop-ext.blogspot.com/2013/02/gridpanel-with-special-characters-and.html