制表符：使用 textarea 格式化程序的错误单元格高度答案

【问题标题】：Tabulator: wrong cell height with textarea formatter制表符：使用 textarea 格式化程序的错误单元格高度
【发布时间】：2021-05-13 09:28:04
【问题描述】：

在 Tabulator 4.9 中，我试图在某些单元格中设置一个包含长文本的表格。我为此使用了formatter:"textarea"，但结果很奇怪。带有长文本的单元格的高度太大。请参阅代码笔。当我手动调整列大小时，单元格会立即跳到正确的高度。但是为什么一开始就不是合适的高度呢？

https://codepen.io/pen/yLMewyd

const longText = "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book."

let exampleData = [
{id:1, name:"Oli Bob", progress:12, gender:"male", col:"red", dob:"19/02/1984", car:1},
{id:2, name:"Mary May", progress:1, gender:"female", col:longText, dob:"14/05/1982", car:true},
{id:3, name:"Christine Lobowski", progress:42, gender:"female", col:"green", dob:"22/05/1982", car:"true"},
{id:4, name:"Brendon Philips", progress:100, gender:"male", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", progress:16, gender:"female", col:"yellow", dob:"31/01/1999"},
{id:6, name:"Frank Harbours", progress:38, gender:"male", col:longText, dob:"12/05/1966", car:1},
{id:7, name:"Jamie Newhart", progress:23, gender:"male", col:"green", dob:"14/05/1985", car:true},
{id:8, name:"Gemma Jane", progress:60, gender:"female", col:"red", dob:"22/05/1982", car:"true"},
{id:9, name:"Emily Sykes", progress:42, gender:"female", col:"maroon", dob:"11/11/1970"},
{id:10, name:"James Newman", progress:73, gender:"male", col:"red", dob:"22/03/1998"},
{id:11, name:"Martin Barryman", progress:20, gender:"male", col:"violet", dob:"04/04/2001"},
{id:12, name:"Jenny Green", progress:56, gender:"female", col:"indigo", dob:"12/11/1998", car:true},
{id:13, name:"Alan Francis", progress:90, gender:"male", col:"blue", dob:"07/08/1972", car:true},
{id:14, name:"John Phillips", progress:80, gender:"male", col:"green", dob:"24/09/1950", car:true},
{id:15, name:"Ed White", progress:70, gender:"male", col:"yellow", dob:"19/06/1976"},
{id:16, name:"Paul Branderson", progress:60, gender:"male", col:"orange", dob:"01/01/1982"},
{id:18, name:"Emma Netwon", progress:40, gender:"female", col:"brown", dob:"07/10/1963", car:true},
{id:19, name:"Hannah Farnsworth", progress:30, gender:"female", col:"pink", dob:"11/02/1991"},
{id:20, name:"Victoria Bath", progress:20, gender:"female", col:"purple", dob:"22/03/1986"},
];

var table = new Tabulator("#example-table", {
    data: exampleData,
    headerSort:false,
    columns:[    
        {title:"Name", field:"name", editor:"input", width:150},
        {title:"Progress", field:"progress", formatter:"progress"},
        {title:"Gender", field:"gender"},
        {title:"Multi-line", field:"col", formatter:"textarea"}, //, maxWidth: 350},
        {title:"Date Of Birth", field:"dob", hozAlign:"center"},
        {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"}        
    ]
});

【问题讨论】：

4.9 版本中的行高计算存在问题。如果您升级到 5.1，它应该可以正常工作

标签： javascript tabulator

【解决方案1】：

我在 Tabulator ctor() 之后添加了一个 table.redraw(true) 并获得了更好的结果。但目前，我无法告诉你为什么。完全重绘修复的列的初始化肯定有问题；您可能想在 GITHub 上提出错误报告

【讨论】：