iview下拉树组件vue-treeselect
demo示例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eb06cc4389a28568e6e6757a8c00844c.png)
- 下载组件
npm install --save @riophae/vue-treeselect
2.引入组件及样式
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
3.页面使用
<Col span="12">
<FormItem label="父菜单" label-position="top" prop="parentId">
<treeselect v-model="formData.parentId" :options="treeData" />
</FormItem>
</Col>
注意 Treeselect需要 id label 所以可能要处理下你的树形数据
jsonTree() {
var that = this
const data = that.routeData
// Treeselect需要 id label 后端返的是dataId 和 routeName 这里我使用了replace方法将其转为id 和 label
let response = JSON.parse(JSON.stringify(data).replace(/dataId/g, "id"))
this.treeData = JSON.parse(JSON.stringify(response).replace(/routeName/g, "label"))
},
4.更多使用方法参考作者github地址: Treeselect.