treeselect自定义显示内容时碰到的问题

前端小王呀

于 2024-05-27 12:08:44 发布

阅读量575

点赞数 10

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_46415160/article/details/139234521

版权

官网：https://vue-treeselect.js.org/
安装：npm install --save @riophae/vue-treeselect
使用：`

<html>
  <head>
    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
  </head>
  <body>
    <div id="app">
      <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
  </body>
  <script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)

    new Vue({
      el: '#app',
      data: {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          isGroup:1,
          children: [ {
            id: 'aa',
            label: 'aa',
            isGroup:0,
          }, {
            id: 'ab',
            label: 'ab',
            isGroup:1,
          } ],
        }, {
          id: 'b',
          label: 'b',
            isGroup:0,
        }, {
          id: 'c',
          label: 'c',
            isGroup:1,
        } ],
      },
    })
  </script>
</html>

需求：根据isGrou的值判断是否显示按钮
在这里插入图片描述

问题：数据是后台返回的，无法拿到isGroup的值只能拿到id、label，用normalizer方法也拿不到，后来转了一大圈才知道所有数据都在node.raw中，而不是在node中
在这里插入图片描述
使用node.raw.isGroup就能立即拿到，而不是用node.isGroup取值，这样顺利解决问题

前端小王呀

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
treeselect自定义显示内容时碰到的问题

问题：数据是后台返回的，无法拿到isGroup的值只能拿到id、label，用normalizer方法也拿不到，后来转了一大圈才知道所有数据都在node.raw中，而不是在node中。使用node.raw.isGroup就能立即拿到，而不是用node.isGroup取值，这样顺利解决问题。需求：根据isGrou的值判断是否显示按钮。
复制链接

扫一扫