码迷,mamicode.com
首页 > 其他好文 > 详细

el-select与el-tree的结合使用

时间:2020-10-14 20:22:40      阅读:49      评论:0      收藏:0      [点我收藏+]

标签:EDA   data   idt   2-2   ret   height   model   efault   script   

效果:

技术图片

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-select与el-tree的结合使用

标签:EDA   data   idt   2-2   ret   height   model   efault   script   

原文地址:https://www.cnblogs.com/lilistyle/p/13813301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!