共计 2893 个字符,预计需要花费 8 分钟才能阅读完成。
应用 vue-selecttree 组件时,
我所遇到的坑:
1:初始加载的时候如果设置 tree 的 value 为 ”” 时,页面会显示“unknown”,将其值改为 null 即可
2:自定义下拉选项的展现时,外面的展现只能为简略类型类型(对象或者数组会报错:Error in render: “TypeError: Cannot convert object to primitive value”)
3:该插件对渲染数据要求高,即须要贴合它自身的数据模式。所以你的数据必须蕴含:id,label 字段,如果有子集,必须用 children 做 key
4: 自定义下拉框选项时,理论的数据值不是 node,而是 node.raw(我天,这里几乎暴风哭泣,我原本想打印出 node 看看,后果死活报 2 的错,而后间接 node.type 的时候有没有值,,,还好最初被机智的我发现了!)
5: 官网可能也感觉本人的第三条太变态了,所以提供了一个 normalizer 这个属性本是好用的,然而!!谁叫我要实现懒加载!!!而后就呈现了 BUG,调到我都要狐疑人生了,所以才有了在页面 mounted 的时候对数据进行规范化解决,外面的 children 也是在进入页面渲染前就实现了规范化。
做了三小时才做完,都怪本人太自信!早点看官网的懒加载文档的话,应该早就完了,以此记录,望大家不要同我一样踩坑
贴 gitlab 地址,大家能够看看 GitHub|vue-treeselect
另附:插件真的超好用!为大佬们点赞!
源码:
<template>
<div>
<treeselect
:options="fieldlist"
v-model="value"
:load-options="loadOptions"
placeholder="尝试搜寻">
<label
slot="option-label"
slot-scope="{node}">
<!-- node.raw 理论才是每个节点的值 -->
<span style="float: left">{{node.raw.label?node.raw.label:node.raw.id}}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{node.raw.type}}</span>
</label>
</treeselect>
</div>
</template>
<script>
// cnpm i @riophae/vue-treeselect --save-dev
// import the component
import treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// 懒加载
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, 1000)
}
import staticjson from '../../static/staticjson.json'
export default {
components:{treeselect},
data(){
return{
value:null,
optionvalue:"",
fieldlist:[ ],
origindatalist:[{"description":"这是 ID","type":"ID","name":"id1"},
{"description":"这是 tanent","type":"Tatent","name":"tatent"},
],
typesamplelist:staticjson.typesamplelist
}
},
mounted(){
// 初始化列表
this.fieldlist=this.initList()},
methods:{
// initList
initList(list){
list = list&&list.length?list:this.origindatalist;
var backlist =[]
list.forEach(element => {var item = this.localnormalizer(element)
backlist.push(item)
});
return backlist
},
// 懒加载
//
loadOptions({action, parentNode, callback}) {if (action === LOAD_CHILDREN_OPTIONS) {simulateAsyncOperation(() => {
var children = [{"type":"ID","description":"id2","name":"id2"+new Date().getTime()+Math.random()},
{"type":"App","description":"app","name":"app"+new Date().getTime()+Math.random()}
]
var pchildren = []
children.forEach((citem)=>{var ccitem = this.localnormalizer(citem)
pchildren.push(ccitem)
})
parentNode.children=pchildren
console.log('sdsds',parentNode.children)
console.log(this.fieldlist)
callback()})
}
},
/**
* 规范化数据
* 该办法做两件事件:* 1:规范化数据
* 2:依据类型 set children 的值
* 如果是一般类型,不设置 children 值
* 如果是简单类型,设置 children 为 null
* 这样组件便能主动为不同值增加右侧可开展按钮
* staticjson.typesamplelist 为普通型类型汇合,全小写
* **/
localnormalizer(node) {
var flag = false;
if(node.type){
// 类型存在且不属于根本类型
if(this.typesamplelist.indexOf(node.type.toLocaleLowerCase())<0){flag = true}
}
// 自定义 key==type
var item ={
id: node.name,
label: node.description?node.description:node.name,
type:node.type
}
//
if(flag){item.children= null}
return item
}
}
}
</script>
正文完