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

效果: