介绍了在Element UI框架中巧用树选择器的实现，并分享给大家。顺便给自己留个条，如下：

介绍

Element UI框架中有选择器和树控件，但是没有树选择器，也就是图上这种方式的选择器，所以只能自定义选择器的槽。这是多重选择的情况。如果是单项选择，则去掉复选框并修改部分处理。

html部分的代码：

El-select v-model=' dataArr ' : multiple=' multiple ' filterable : placeholder=' placeholder ' : disabled=' disabled ' : collapse-tags=' multiple ' @ remove-tag=' handleTagChange ' @ visible-change=' handleOptionHidden ' class=' hi-input ' El-option value=' 0 ' class=' hidden '/El-option！-由El-tree绑定的数组中的子项的键值不能为0-El-tree ref=' tree ' : data=' options ' node-key=' key ' show-checkbox 3360 default-checked-keys=' selected data ' @ check=' handlecheckchange ' : props=' defaultprops '/El-tree/El-select El-tree中的绑定值是所选键值的数组。受检查约束的事件功能是：

在树选择器上获取所选值过滤器的未定义值和空值(用于容错处理)。具体代码如下：handlecheckchange : Function(){ this。SelectedData=this。$ refs.tree.getCheckedKeys()。筛选器(_=_)；}因为选择器是通过标签值和键值来区分的，所以每当el-tree中的选定值键值发生变化时，选择器上的绑定值标签值也应该发生变化。因此，在watch中监视键值，以在el-tree绑定的数据中找到与当前键值对应的标签值。具体代码如下：

watch: { selectedData:函数(newValue) { this。$ nextTick(()={ this . dataarr=this . handledatatransform(new value，' key '，' label ')；});}，}，methods: { getNameById(数组、值、Id、名称、multi){ let arr=arr | |[]；让旗；让result=arr . filter(item={ return item[id]' '===value“”；});if(multi){ flag=result . map(item={ return item[name]；});} else { let obj=result[0]；flag=name？}返回标志；}，handleDataTransform:函数(源、键、值){返回this . options . map(_={ let arr=source . map(item=this。$util.getNameById(_。子项、项目、键、值))。筛选器(item=item)；返回逮捕；}).reduce((acc，cur)={ return ACC . concat(cur)；}, []);}}到目前为止，树控件到选择器的单向绑定已经完成，现在当选择器的值发生变化时，树控件也会发生变化。因为此时有多个选择，所以应该在remove-tag事件中处理它。具体代码如下：

handletagchange : function(){//handledattransformation已经对此进行了定义。selecteddata=this。handledattrformation(这。dataarr，‘label’，‘key’)；这个。$ refs . tree . setcheckeedkeys(this . selecteddata)；}，此时这个树选择器已经完成了~ ~:clap:clap:但是我们可以进一步优化，比如选择后的内容和选择前的内容相同，请求的处理就不会再发生。绑定在选择器中的可见变化事件可以通过以下思想来处理：

item的值为true，即展开下拉框时，存储当前值。注意：warning:存储的值必须放在全局变量中，每次输入函数都会初始化函数中的变量，所以当下拉框关闭，再次输入函数时，之前存储的值就没了。item的值为false，即下拉框关闭时，判断之前存储的变量值是否等于当前变量值，如果不等于，则触发数据更新。具体代码如下：handleoptionhidden :函数(项){//如果选择的内容保持不变(项){this。selecteditem=[.这个。selected data]；} else {//this。$util.isEqual()是一个判断两个数组是否相等的函数。网上有很多。请谷歌如果(！这个。$ util . isequal(this . selecteditem，this . selecteddata)){ this . handleupdate(this . selecteddata)；}}}，以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。