ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

el-select和el-tree一起用

2022-08-29 15:02:48  阅读:72  来源: 互联网

标签:el name 二级 tree id data children select


html代码

<el-form-item label="树型结构" >
  <el-select
    v-model="treeData"
    placeholder="请选择..."
    style="width: 16rem"
  >
    <el-option
      :value="treeDataValue"
      style="height: auto"
    >
      <el-tree
        ref="tree"
        :data="data"
        default-expand-all
        node-key="id"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </el-option>
  </el-select>
</el-form-item>

js代码

<script>
export default {
  data() {
    return {
      treeData: "",
      treeDataValue: "",
      data: [
        {
          id: 1,
          name: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
            },
          ],
        },
        {
          id: 2,
          name: "一级 2",
          children: [
            {
              id: 5,
              name: "二级 2-1",
            },
            {
              id: 6,
              name: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          name: "一级 3",
          children: [
            {
              id: 7,
              name: "二级 3-1",
            },
            {
              id: 8,
              name: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {  
  handNodeClick(data,node,nodeData){     this.treeDataValue= data     this.treeData= data.name   }
 }, }; </script>>

 

标签:el,name,二级,tree,id,data,children,select
来源: https://www.cnblogs.com/smile-fanyin/p/16635961.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有