vue-treeselect下拉树

在vue 使用中有下拉树非常的好

• 下载：

npm install --save @riophae/vue-treeselect

• 引入及注册

// 引入下拉树组件
import Treeselect from '@riophae/vue-treeselect'
// 引入下拉树样式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

• 使用

<treeselect 
    v-model="form.parentId" 
    :options="menuOptions"      // 这个是数据源
    :normalizer="normalizer"   // 这个在methods设置方法 可以自由设置节点
/>

-数据源
{
          id: '1',
          label: '东西',
          children: [ {
            id: '11',
            label: '苹果',
            isNew: true,
          }, {
            id: '12',
            label: '葡萄',
          }, {
            id: '13',
            label: '莉',
          }],
        }],
      }

methods: {
/** 转换菜单数据结构 */
    normalizer(node) {
      return {
        id: node.menu_id, // 键名转换，方法默认是label和children进行树状渲染
        label: node.title,
        children: node.children,
      }
    },
}