Question

我尝试自定义多个选择（使用selectize.js插件）

我的有效载荷具有以下结构：

[
  {id: 1, name: 'First', email: 'first@ok.ob'},
  {id: 2, name: 'Second', email: 'second@ok.ob'},
  .....
]

如何自定义选项以查看下一种格式的文本

First <first@ok.ob>
Second <second@ok.ob>

但是在输入字段中选择人员时，应该显示为

First Second

没有其他参数

也许有人可以提供文档或解决方案的链接，因为我找不到有关此案的任何信息。

谢谢。

Answer 1

Selectize具有用于自定义呈现的render回调函数。您可以看看here

您可以在其config对象中提及它。我已经使用过类似下面的内容-

config = {
    valueField: 'id',
    labelField: 'firstName',
    searchField: ['id', 'firstName', 'lastName', 'userName', 'cell'],
    maxItems: 1,
    render: {
        item: (item: any, escape: any) => {
            return `<div>` +
                escape(item.firstName) + ` ` + escape(item.lastName) +
                ` <span>&lt;` + escape(item.userName) + `&gt;</span>` +
                `</div>`;
        },
        option: (item: any, escape: any) => {
            return this.templateCustomer(item, escape);
        }
    },
};

选择自定义选项视图

1 个答案: