zoukankan      html  css  js  c++  java
  • vue中使用el-tree实现一行显示多条数据

    html代码:

        <!--   弹出框 -->
        <el-dialog
          title="选择参与人"
          :visible.sync="dialogCreateFormVisibleTDCY"
          width="40%"
          :before-close="handleClose"
          :close-on-click-modal = "false">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <el-row>
            <el-col :span="24">
              <div>
                <div class="searchStyle">可选参与人</div>
                <div class="TDCYstyle">
                  <el-tree ref="userTree"
                           :data="treeData"
                           :default-checked-keys="TDCY"
                           :render-content="renderContent"
                           @node-expand="handleExpand"
                           @node-collapse="closeExpand"
                           show-checkbox
                           node-key="orgid"
                           accordion
                           :filter-node-method="filterNode"
                           :props="defaultProps">
                  </el-tree>
                </div>
              </div>
            </el-col>
          </el-row>
    
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetChecked">清空</el-button>
            <el-button @click="dialogCreateFormVisibleTDCY=false">取 消</el-button>
            <el-button type="primary"  @click="addCustomTDCY">确 定</el-button>
          </div>
        </el-dialog>

    <style lang="scss" scoped>
    .searchStyle{
    margin: 20px 0 10px 0;
    }
    .TDCYstyle{
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    }
    </style>
     

    代码实现:

     private defaultProps:any =  {
        children: 'children',
        label: 'orgname'
      }
      private dialogCreateFormVisibleTDCY:boolean = false;
      private  treeData:any =  [];
      private filterText:any = "";
      private TDCY:any=[]
    
      @Watch('filterText')
      onFilterText(val:any){
       // 关键词过滤
        let node:any =  this.$refs.userTree
        node.filter(val);
      }
    
      filterNode(value:any, data:any) {
        if (!value) return true;
        return data.orgname.indexOf(value) !== -1;
      }
    
      // 一行显示多条数据
      handleExpand() {
        //节点被展开时触发的事件
        //因为该函数执行在renderContent函数之前,所以得加this.$nextTick()
        this.$nextTick(()=>{
          this.changeCss();
        })
      }
      // 关闭一行显示多条
      closeExpand(){
        // 关闭节点时删除class为foo的属性 
        var levelName = document.getElementsByClassName("foo"); // levelname是上面的最底层节点的名字
        for (var i = 0; i < levelName.length; i++) {
          // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
          // @ts-ignore
          levelName[i].parentNode.style.cssFloat = "";
          // @ts-ignore
          levelName[i].parentNode.style.styleFloat = "";
          // @ts-ignore
          levelName[i].parentNode.onmouseover = function() {
            // @ts-ignore
            this.style.backgroundColor = "";
          };
        }
      }
      // 一行显示多条
      // @ts-ignore
      renderContent(h:any, { node, data, store}){
        // console.log('信息',h,node,data,store)
        let classname = ''
        // perms这个是后台数据区分普通tree节点和横向tree节点的标志  各位要根据实际情况做相对应的修改
        // 由于项目中有三级菜单也有四级级菜单,就要在此做出判断
        if (node.level === 4) {
          classname = "foo";
        }
        if (node.level === 3 && node.childNodes.length === 0) {
          classname = "foo";
        }
        if (node.level === 2 && node.childNodes.length === 0) {
          classname = "foo";
        }
        return h(
          "p",
          {
            class: classname
          },
          node.label
        );
      }
      // 改变tree节点样式
      changeCss() {
        var levelName = document.getElementsByClassName("foo"); // levelname是上面的最底层节点的名字
        for (var i = 0; i < levelName.length; i++) {
          // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
          // @ts-ignore
          levelName[i].parentNode.style.cssFloat = "left"; // 最底层的节点,包括多选框和名字都让他左浮动
          // @ts-ignore
          levelName[i].parentNode.style.styleFloat = "left";
          // @ts-ignore
          levelName[i].parentNode.onmouseover = function() {
            // @ts-ignore
            this.style.backgroundColor = "#fff";
          };
        }
      }
    
      // 清空-已选项
      resetChecked() {
        console.log('清空数',this.$refs.userTree)
        // @ts-ignore
        this.$refs.userTree.setCheckedKeys([]);
      }
    
      // 打开弹出框
      async hShowTDCY(){
        await this.getTreeData();
        console.log('成员信息展示',this.dialogCreateFormVisibleTDCY)
        this.dialogCreateFormVisibleTDCY = true;
      }
    // 获取成员信息
      async getTreeData(){
        // @ts-ignore
        const { data } = await this.commonApi.getOrg();
        this.treeData=data.data;
        console.log('获取机构树',this.treeData)
      }
    
    
      // 选中成员
      addCustomTDCY(){
        let node:any =  this.$refs.userTree;
        let data:any =  node.getCheckedNodes();
        let id:any = [];
        id = data.map((item:any,index:any)=> {
          console.log('data数据',item)
          return item.orgid
        })
    
        let TDCY:any;
        // id是个数组
        // TDCY = id;
        this.TDCY = id;
        // TDCY = id.toString();
         this.form1.USERIDTDCY = this.TDCY
        this.dialogCreateFormVisibleTDCY=false;
      }

    效果:

  • 相关阅读:
    20191005
    20191004-gugugu公告
    20191003
    10.2 一天
    考试总结 模拟$105$
    考试总结 模拟$104$
    考试总结 模拟$103$
    考试总结 模拟$102$
    考试总结 模拟$101$
    考试总结 模拟$100$
  • 原文地址:https://www.cnblogs.com/evident/p/14735668.html
Copyright © 2011-2022 走看看