VUE+ELEMENTUI el-tree+el-card+el-table结合使用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

• 页面组件高度可以自适应浏览器窗体高度
• 效果图
  

左树形结构，右列表

<template>
  <div class="mod-user">
    <el-row :gutter="10">
    
      <el-col :span="4">
        <el-card class="box-card" shadow="hover">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable>
          </el-input>
          <div class="treebox" :style="{ 'height': treeClientHeight  + 'px' }">
            <el-tree class="filter-tree" :data="commodityTypeTreeData" :props="defaultProps" default-expand-all
              :filter-node-method="filterNode" ref="tree" node-key="commodityTypeCode" :highlight-current="true"
              @node-click="handleNodeClick">
            </el-tree>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="20">
        <el-card shadow="hover" :style="{ 'min-height': treeClientHeight + 80 + 'px' }">
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item label="商品编号">
              <el-input v-model="dataForm.commodityNo" placeholder="商品编号" clearable>	   
              </el-input>
            </el-form-item>           
            <el-form-item>
              <el-button @click="getDataList()" type="primary" icon="el-icon-search">查询
              </el-button>
              <el-button type="success" icon="el-icon-circle-plus-outline" 
              @click="addOrUpdateHandle()">新增</el-button>
              <el-button type="danger" icon