ivew组件使用Vue+Select+Tree实现单选_vueselecttree

最新推荐文章于 2024-08-29 11:16:00 发布

2401_84619145

最新推荐文章于 2024-08-29 11:16:00 发布

阅读量463

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84619145/article/details/139928395

版权

选择tree的数据后，关闭选择器。
在这里插入图片描述

话不多说上代码，
这里是用的View Design+vue实现的~

<template>
  <div class="my-tree">
    <FormItem :label="companyName">
      <Select v-model="companyTree" :id="setTreeId" @on-change="changeOpt">
        <Option
          :key="treeId"
          :value="treeId"
          :label="treeName"
          style="height: auto"
          hidden
        />
        <Option value="ALL">全部</Option>
        <Tree :data="treeData" @on-select-change="selectTreeData" />
      </Select>
    </FormItem>
  </div>
</template>

<script>
export default {
  name: "MyTree",
  data() {
    return {
      treeData: [], //树的数据
      treeId: "", //树回显Id
      treeName: "", //树回显名称
      companyTree: "ALL"
    };
  },
  props: {
    //名字
    companyName: {
      type: String,
      default: () => {
        return "树形下拉选择框";
      }
    },
    //一个页面多个下拉框，唯一id
    setTreeId: {
      type: String,
      default: "selectTree"
    }
  },
  created() {
    this.treeData = [
      {
        title: "四川省",
        id: "sichuan",
        expand: true,
        children: [
          {
            title: "成都市",
            id: "chengdu",
            expand: true,
            children: [
              {
                title: "高新区",
                id: "gaoxin"
              },
              {
                title: "金堂",
                id: "jitang"
              }
            ]
          },
          {
            title: "资阳市",
            id: "ziyang",
            expand: true,
            children: [
              {
                title: "安岳县",
                id: "anyue"
              }
            ]


### 最后

全网独播-价值千万金融项目前端架构实战

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi1iMzExOWVhYzM3ZjkyNWE3NjMyNTFkNWE5ZWY5Njc3MF9oZC5qcGc?x-oss-process=image/format,png)



从两道网易面试题-分析JavaScript底层机制

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi0xMGE3MzBlOTc1ZmVjOTFjMDcwOTE1OWIwMTdjNTliMV9oZC5qcGc?x-oss-process=image/format,png)



RESTful架构在Nodejs下的最佳实践



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1hY2UyZjVjNjQ1YjhkMTE1MzA4YzcyZDM1ZGNkZGYzNV9oZC5qcGc?x-oss-process=image/format,png)

一线互联网企业如何初始化项目-做一个自己的vue-cli

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04MGU5MWQ0NGY3NTUzZTA5OTJhOWEzN2Y2OGFhYTAwNF9oZC5qcGc?x-oss-process=image/format,png)



思维无价，看我用Nodejs实现MVC

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yZGI4MTZiY2JlODkwNjBiMDY1NWIyODdlM2Y4NWVlM19oZC5qcGc?x-oss-process=image/format,png)



代码优雅的秘诀-用观察者模式深度解耦模块

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi04YTY0YTU3YTdlNDFmZDc3OTRiZWYzNjVkYjNlYzQxMF9oZC5qcGc?x-oss-process=image/format,png)

前端高级实战，如何封装属于自己的JS库

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1lOTdlMTZkMWYyNDZhNjUxZjA4ZThlZjdjZjRhZWRjZl9oZC5qcGc?x-oss-process=image/format,png)

VUE组件库级组件封装-高复用弹窗组件

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi00NWJjMGI2OWU4YzY2YTcxYzBkNWFiNjczZTkzM2MyZF9oZC5qcGc?x-oss-process=image/format,png)