zoukankan      html  css  js  c++  java
  • vue+element下拉树选择器

    项目需求:输入框点击弹出树形下拉结构,可多选或者单选。
    解决方案:1.使用layui formSelect多选插件
    2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构

    <el-form-item label="下拉树选择器">
          <el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags>
              <el-option :value="mineStatus" style="height: auto">
                  <el-tree :data="treedata" default-expand-all show-checkbox check-strictly node-key="id"
                     ref="tree" highlight-current :props="defaultProps"
                     @check-change="handleCheckChange"></el-tree>
                   </el-option>
               </el-select>
    </el-form-item>
    
        data: function () {
            return {
                mineStatus: "",
                treedata: [],
                defaultProps: {
                    children: "children",
                    label: "name"
                },
            }
        },
    
    
     handleCheckChange(data, checked, node) {
                let res = this.$refs.tree.getCheckedNodes(false, true); //true,1. 是否只是叶子节点 2.选择的时候不包含父节点)
                if (checked) {
                    this.$refs.tree.setCheckedNodes([data]);
                }
                let arrLabel = [];
                // console.log(res, 'res')
                res.forEach(item => {
                    if (arrLabel.length === 0) {
                        arrLabel.push(item.name);
                    } else {
                        arrLabel.length === 0;
                    }
                });
                this.mineStatus = arrLabel;
                // console.log(arrLabel, 'arrLabel')
            },
    
  • 相关阅读:
    Servlet中request乱码问题解决
    java对cookie的操作
    EL表达式
    MYSQL安装以及卸载 -- WINDOWS
    java接口
    HttpClient配置及运用(二)
    JVM的内存空间
    孤寂的欢愉
    论神性与人性
    使用NPOI读取Excel出错
  • 原文地址:https://www.cnblogs.com/FormerWhite/p/11719665.html
Copyright © 2011-2022 走看看