Vue-TreeSelect和echart联动

vue-Treeselect学习道阻且长

因为自身基础薄弱导致自己在学习过程中有很多不懂的地方，非常容易陷入一种自卑的境地，自己什么都不懂。本人也将会每一周写几篇博客来记录自己的学习过程和遇到的很多困难。

在学习Treeselect中一开始甚至连什么是Events都不知道，所以学习起来也是非常痛苦，在引用组件和使用某一封装组件功能中请务必看完这个组件的Events和props

这个是vue-treeselect的官网地址 如果你要精通这个组件请好好的观看这个官方文档以及实现里面的各个功能，如果能够有10个点赞我也会在接下来的一篇中好好讲讲这个组件的相关API

业务需求

我要实现的是通过select选择标签进行选取并将相关数据传输到echart的饼图当中，所以我先进行的是构建select，我一开始使用的是element-ui中的select标签并结合了el-input进行联动搜索，后面发现了一个小小的bug而且不会解决

当标签中进行搜索但是option中没有数据时出现了无数据并且把我的搜索框覆盖，导致只能通过页面刷新重置这个页面才能有搜索框出现，最后还是他人跟我讲看看其中的API看看它自带的方法，其实el-select自带搜索方法只要加一个filterable即可，当这个搜索业务实现以后还要用树形的结构展示也就是还要再其中内嵌一个Tree，也是到此我发现了Treeselect，相当于我自己写了一遍这个组件😂浪费了太多时间

TreeSelect @select

这是一个非常强大的组件，可以实现树形搜索，多项选取，异步搜索等等，其中有太多的API真的很难讲完，所以这次也就只讲我用到的方法@select

select	(node, instanceId)	选择一个选项后发出。

这个是官方所给的解释，意思是当你选择一个option时他就会触发这个方法

下面是使用这个组件后的效果，里面的数据需要大家去填写，但是要具备其中的几个基本特性，请大家阅览官方文档

这是我写的组件

<treeselect
                    v-model="value"
                    class="elSelectWidth"
                    style="width: 10%"
                    placeholder="请输入标签"
                    :multiple="false"
                    :options="optionsMetaAll"
                    @select="findValue"
                  />

这个是方法内容

data() {
    return{
        temp: {},
    }
}
findValue(node) {
      this.temp = node
    }

我们要把父组件中的节点值取出来放进子组件中，当我们点击选择option时我们的findValue就会把node这个Object赋值给temp这个临时的变量，我们来看看node的结构

将我们原本设置再option中的内容全部提取出来了，然后我们的任务就是把这个temp全部传给子组件

<div class="deviceListHomepageBoxEchartsBox">
                  <div class="deviceListHomepageBoxEchartsPieBox">
                    <div class="deviceListHomepageBoxEchartsBox">
                      <online :options="optionsMetaAll" :obj="temp" />
                    </div>
                  </div>
                </div>

当然我们需要在这里进行注册后才能调用这个component,我们将这个Object声明为obj并带着temp的值进到子组件中

第一步我们要初始化obj不然子组件不知道它是什么东西，就像对暗号一样

props: {
    obj: {
      type: Object,
      default: () => {
        return Object
      }
    }
  },

声明为一个object体然后我们就能在子组件中调用这个了

我们将obj中的值使用到我们的echart图表中的数据中

 data: [
            // 每个模块的名字和值
            { name: '离线', value: this.obj.value1 },
            { name: '在线', value: this.obj.value2 }
          ],

使用this关键字调用

这个时候问题就出现了，当我在父组件改变数值，子组件同时也改变的时候，echart没有办法重新渲染这个值，也是因为这个我最后弄了两天才搞懂，其实也非常简单，只需要使用watch进行数据监听，然后当数据改变时我们重新渲染就行

watch: {
    obj() {
      this.getPie()
    }
  },

非常简单的一行代码就完成了相关数据的监听了

然后展示一下相关的联动效果吧

只需要选择这个Treeselect就能够改变其中的值了,虽然是一个非常简单的组件和业务功能但是花费了我一个星期去学习和调试，感觉自己很疲惫，但是最后把问题解决了的时候真的是一身轻松，希望大家也能快快调试成功，学习到更多东西