VueTreeselect 参数options的数据转换——参数normalizer

VueTreeselect 控件: 

<template>
  <div>
    <treeselect v-model="value" :normalizer="normalizer" placeholder="请选择..." :options="options" />
  </div>
</template>

options的值是个树形结构的数组:

options: [ {
          id: '1',
          name: 'a',
          children: [ {
            id: '11',
            name: 'aa',
          }, {
            id: '12',
            name: 'ab',
          } ],
        }, 
        {
          id: '2',
          name: 'b',
          children: []
        } ],

normalizer属性,是用于将options的值,转换为符合vue-treeselect要求的数据格式;

vue-treeselect中,即使您为children属性分配一个空数组,依然会显示有分支,这时就可以使用normalizer去掉children属性:

normalizer(node){
    //去掉children=[]的children属性
    if(node.children && !node.children.length){
        delete node.children;
    }
    return {
        id: node.id,
        //将name转换成必填的label键
        label:node.name,
        children:node.children
    }
}

 

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要设置只允许选末级节点,可以使用 vue-treeselect 的 `normalizer` 属性。`normalizer` 是一个函数,可以用来对选中的节点进行转换和过滤。在 `normalizer` 中,可以判断一个节点是否为末级节点,如果不是,则将其过滤掉,只保留末级节点。 以下是一个设置只允许选末级节点的例子: ```html <template> <vue-treeselect v-model="value" :options="options" :normalizer="normalizer"></vue-treeselect> </template> <script> export default { data() { return { value: [], options: [ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1.1', children: [] }, { id: 3, label: 'Node 1.2', children: [] }, ], }, { id: 4, label: 'Node 2', children: [ { id: 5, label: 'Node 2.1', children: [] }, { id: 6, label: 'Node 2.2', children: [] }, ], }, ], }; }, methods: { normalizer(node) { if (node.children.length === 0) { return node; } }, }, }; </script> ``` 在上面的例子中,我们定义了一个 `normalizer` 函数,它会过滤掉非末级节点。具体来说,如果一个节点的 `children` 属性为空(即它是末级节点),则返回这个节点,否则返回 undefined,表示将这个节点过滤掉。 关于定制化参数名称,可以使用 vue-treeselect 的 `labelProp` 和 `idProp` 属性。`labelProp` 用于指定节点显示的文本对应的属性名称(默认为 `label`),`idProp` 用于指定节点的唯一标识对应的属性名称(默认为 `id`)。 以下是一个定制化参数名称的例子: ```html <template> <vue-treeselect v-model="value" :options="options" label-prop="name" id-prop="code"></vue-treeselect> </template> <script> export default { data() { return { value: [], options: [ { code: 1, name: 'Node 1', children: [] }, { code: 2, name: 'Node 2', children: [] }, ], }; }, }; </script> ``` 在上面的例子中,我们将节点的显示文本属性名设置为 `name`,将节点的唯一标识属性名设置为 `code`。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值