Vue-Treeselect三级动态加载

先贴插件地址及代码 https://vue-treeselect.js.org/

<treeselect:multiple="true":options="options":load-options="loadOptions"placeholder="Try expanding any folder option..."v-model="value"/>

import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'// We just use `setTimeout()` here to simulate an async operation
// instead of requesting a real API server for demo purpose.
const simulateAsyncOperation = fn => {setTimeout(fn, 2000)
}export default {data: () => ({value: null,options: [ {id: 'success',label: 'With children',// Declare an unloaded branch node.children: null,}, {id: 'no-children',label: 'With no children',children: null,}, {id: 'failure',label: 'Demonstrates error handling',children: null,} ],}),methods: {loadOptions({ action, parentNode, callback }) {// Typically, do the AJAX stuff here.// Once the server has responded,// assign children options to the parent node & call the callback.if (action === LOAD_CHILDREN_OPTIONS) {switch (parentNode.id) {case 'success': {simulateAsyncOperation(() => {parentNode.children = [ {id: 'child',label: 'Child option',} ]callback()})break}case 'no-children': {simulateAsyncOperation(() => {parentNode.children = []callback()})break}case 'failure': {simulateAsyncOperation(() => {callback(new Error('Failed to load options: network error.'))})break}default: /* empty */}}},},
}

插件引入方式不再赘述

下面开始叙述懒加载:

插件判断当前文本是否可以展开的依据是改层级是否存在"children"字段, 也就是说如果展开到某一级别不想再次展开需要将改层级的"children"删除(可以和后端沟通, 没有下一级就不给带children字段, 自己删除也可以, 代码如下)

data.forEach(element => {element['id'] = element.sg001 + 'sg' // 防止id混淆element['label'] = element.sg008delete element.children // 删除children字段, 防止出现树形展开结构(treeselect根据当前对象内部有无children字段确定是否需要展开下级菜单)
})

现在来说级联

HTML代码

<treeselect v-model="issuePointValue" :load-options="loadOptions" :multiple="true" :clearable="false" :options="issuePoint" @select="addCheckPoint" @deselect="removeCheckPoint" placeholder="问题点" />

v-model="issuePointValue" // 绑定数据

:load-options="loadOptions" // 展开触发时间, 在此方法内调级联接口

:options="issuePoint" // 下拉展示数据

@select="addCheckPoint" // 勾选触发方法

@deselect="removeCheckPoint" // 取消勾选触发方法

// 问题点动态加载loadOptions ({action,parentNode,callback}) {if (action === LOAD_CHILDREN_OPTIONS) {if (parentNode.sd001 && !parentNode.sg001) { // 加载二级, 二级菜单无sg001simulateAsyncOperation(() => {listReserveByAdminRegion({'data': {'sd001': parentNode.sd001}}).then(res => {if (res.status === 1000) {let data = res.datadata.forEach(element => {element['id'] = element.sg001 + 'b' // 防止id混淆element['label'] = element.sg008})parentNode.children = data}})callback()})} else if (!parentNode.sd001 && parentNode.sg001) { // 加载三级, 三级sd001为nullsimulateAsyncOperation(() => {listCheckPointToView({'data': {'sg001': parentNode.sg001}}).then(res => {if (res.status === 1000) {let data = res.datadata.forEach(element => {element['id'] = element.cd001 + 'c' // 防止id混淆element['label'] = element.cd004})parentNode.children = data}})callback()})}}// parentNode.children = []// callback(new Error('Failed to load options: network error.'))},

此处"loadOptions"方法只要展开级联数据就会调用, 所有级别数据都生效,相当于内部做好了一个递归, 知道没有children字段才停止调用, 这就是上面要删除children的原因

因此需要做一个判断现在处于第几级, 来确定调用哪个接口, 我上面是根据不同接口返回不同字段进行判断

下面是做在没有展开的情况下, 也就是说只有一级父节点并勾选的情况下, 要请求其下的所有子节点并执行勾选方法

// 问题点选中async addCheckPoint (node) {if (node.id === (node.sd001 + 'a')) {await listReserveByAdminRegion({'data': {'sd001': node.sd001}}).then(res => {if (res.status === 1000) {let data = res.datadata.forEach(element => {element['id'] = element.sg001 + 'b' // 防止id混淆element['label'] = element.sg008})node.children = datanode.children.forEach(element => {this.addCheckPoint(element)})}})} else if (node.id === (node.sg001 + 'b')) {await listCheckPointToView({'data': {'sg001': node.sg001}}).then(res => {if (res.status === 1000) {let data = res.datadata.forEach(element => {element['id'] = element.cd001 + 'c' // 防止id混淆element['label'] = element.cc002})node.children = data}})let pointList = []pointList = node.childrenthis.$refs.arcgisVue.addCheckPointToMap(pointList)} else if (node.id === (node.cd001 + 'c')) {let pointList = []pointList.push(node)this.$refs.arcgisVue.addCheckPointToMap(pointList)}},

这里同样要验证改调用哪一级子节点接口并对每一级结点进行方法执行

下面是取消结点,

// 问题点取消选中
removeCheckPoint (node) {let data = this.formatterSelected(node)let pointIdList = []pointIdList.push(data)this.$refs.arcgisVue.removeCheckPointFromMap(data)
},
// 格式化代码
formatterSelected (data) {let a = []if (data.children && data.children.length > 0) {data.children.forEach((item, index) => {a.push(...this.formatterSelected(item))})} else {a.push({id: data.id,value: data.value})}return a}

Vue-Treeselect三级动态加载相关推荐

Vue文件内动态加载JS
Vue文件内动态加载JS let jsUrl = 'https://code.jquery.com/jquery-3.4.1.min.js' // JS地址 let jqueryJs = decode ...
vue系统权限(动态加载路由方式)
目录 1.注册vue-router 2.声明默认路由和权限路由 3.用vuex实现全局登录.退出登录等方法 4.用vuex模块单独写权限路由的判断 5.监听路由跳转实现动态加载权限菜单需要用到动 ...
vue组件的动态加载
平常的vue项目开发,已经很难遇见一千行,甚至几千行代码的页面了,毕竟大家都会去拆分组件.但如果一个页面需要通过十几个组件或者几十个组件中的某几个组件去排列组合渲染,此时用动态加载就很有必要了. ...
Vue 使用v-html 动态加载代码点击事件不管用解决办法
最近做一个项目,由于数据展示受限制,只能动态拼接代码,但是发现一个问题,在标签上写的@click="xxx()" 不管用,最后专业前端朋友与之解决,话不多说,看解决办法,相信你那么 ...
在 VUE中，动态加载JS文件
需求在vue组件中需要调用的函数方法名是相同的(接口相同),但是按照页面不同需要导入不同JS文件 .如下: 然而上面这种写法肯定是行不通的,但表达的需求很明确.根据menuId的不同从JS文件中获取 ...
Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...
cascader 动态加载回显_Elementui cascader 级联选择器动态加载数据，保存后回显的问题...
问题描述使用elementui,进行地区选择,分省市区三级动态加载,首次保存后,再次回看数据,怎么选中上次保存的地区省市区三级都是动态加载,下次回来,只有省一级数据,model里面存的是一个数组, ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
vue动态跟新layui的select_vue+layui实现select动态加载后台数据的例子
vue+layui实现select动态加载后台数据的例子发布时间:2020-09-18 22:51:36 来源:脚本之家阅读:85 作者:qq_26814945 刚开始由于layui form渲染 ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...

Vue-Treeselect三级动态加载

Vue-Treeselect三级动态加载相关推荐

最新文章

热门文章