Tabulator.js 5.6：如何修改list编辑器下拉列表显示行数

可以修改，有两种常用实现方式：

1. 全局CSS覆盖（影响所有List编辑器） #

Tabulator的List编辑器下拉列表容器默认类为tabulator-list-editor-list，默认max-height为240px（对应8行左右），直接通过CSS修改该类的max-height即可控制显示行数：

.tabulator-list-editor-list {
  max-height: 360px !important; /* 对应12行，每行约30px，可按需调整数值 */
}

2. 单个列自定义配置（仅影响当前列） #

在editorParams中通过listElement选项创建自定义列表容器，设置max-height来控制行数，不会影响其他列的List编辑器：

修改你的配置代码如下：

{
  title:"Source", 
  field:"source", 
  width:200, 
  editor:"list", 
  headerFilter:"input", 
  editable:editCheck, 
  editorParams:{
    values:{
      "test1":"test1",
      "test2":"test2",
      "test3":"test3",
      "test4":"test4",
      "test5":"test5",
      "test6":"test6",
      "test7":"test7",
      "test8":"test8",
      "test9":"test9",
      "test10":"test10",
      "test11":"test11",
      "test12":"test12",
    },
    maxWidth:false,
    allowEmpty:true,
    listOnEmpty:true,
    freetext:true,
    multiselect:false,
    autocomplete:true,
    // 添加自定义列表容器配置
    listElement: function(){
      const list = document.createElement("div");
      list.style.maxHeight = "360px"; // 控制显示12行，可按需调整数值
      list.style.overflowY = "auto";
      return list;
    }
  },
}

注：Tabulator List编辑器每行高度约30px（包含内边距），可根据目标行数调整max-height的具体数值。

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