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;
  }

效果: