elementUI 表格树使用 tableTree_element table tree

效果图

一、load懒加载方式

1.页面

代码如下（示例）：

	<el-table
	  :data="tableData"
	  style="width: 100%;margin-bottom: 20px;"
	  :header-cell-style="{background:'rgba(250,250,250,1)',color:'#222222'}"
	  :row-style="{background:'rgba(255,255,255,1)',color:'rgba(96,98,102,1)'}"
	  row-key="id" //必须保证id唯一
	  border
	  lazy//懒加载
	  :load="load" //加载children数据 点击每行小三角展开时触发的方法
	  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" //'children'：下一层数据的数组名称
	  @selection-change="handleSelectionChange"
	>
	  <el-table-column prop="attributeName" label="类别" align="center">
	    <template slot-scope="scope">
	      {{ scope.row.name || '-' }}
	    </template>
	  </el-table-column>  
	  </el-table-column>
	  <el-table-column prop="address" label="操作" align="center">
	    <template slot-scope="scope">
	      <div class="handle-button">
	        <el-button v-if="scope.row.pid ===0" class="el-icon-folder-add" type="text" size="medium" @click="add(scope.row)" />
	        <el-button class="el-icon-edit" type="text" size="medium" @click="edit(scope.row)" />
	        <el-button class="el-icon-delete" type="text" size="medium" @click="deleteItem(0,scope.row)" />
	      </div>
	    </template>
	  </el-table-column>
	</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.load方法

load(tree, treeNode, resolve) {
  selectMachineTypeChildren(tree.id).then(res => {//根据所点击行的id调接口获取第二层数据
     if (res.code === 200) {
       resolve(res.data.list)//渲染children数据
     }
   })
 },
1
2
3
4
5
6
7

二、使用el-table-tree-column标签

1.页面

代码如下（示例）：

	<el-table :data="tableData"
	 :row-style="{background:'rgba(255,255,255,1)',color:'rgba(96,98,102,1)'}" 
	  style="width: 100%;margin-bottom: 20px;"
	  :header-cell-style="{background:'rgba(250,250,250,1)',color:'#222222'}"
	  border
	  row-key="id"
	  node-key="id"
	  :default-expanded-keys="expandRowKey"> //默认展开的行
	  <el-table-tree-column fixed align="center" width="180" file-icon="" folder-icon="icon arrow-right"
　　　　　　　　　　　　　　　　　  prop="attributeName" //后台字段
                   		      label="类别" 
　　　　　　　　　　　　　　　　　　levelKey="deep" //后台提供的层级数
　　　　　　　　　　　　　　　　　　parentKey="pid" //父层id
　　　　　　　　　　　　　　　　　　treeKey="id" //树id 必须唯一
　　　　　　　　　　　　　　　　　　child-key="childrens"> //childrens为后台提供的子级数组字段名
　　　 </el-table-tree-column>
	  <el-table-column label="操作" align="center" width="160px">
	    <template slot-scope="scope">
	      <div class="handle-button">
	        <el-button v-if="scope.row.deep != 3" class="el-icon-folder-add" type="text" size="medium" @click="add(scope.row)" />
	        <el-button class="el-icon-edit" type="text" size="medium" @click="edit(scope.row)" />
	        <el-button class="el-icon-delete" type="text" size="medium" @click="deleteItem(0,scope.row)" />
	      </div>
	    </template>
	  </el-table-column>
	</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2.接口返回数据结构

三、注意

• 使用load方式：后台返回数据格式一层，点击每行小三角触发load方法，根据点击层的id调用后台接口获取子级数据，而后渲染到表格中。
• 使用el-table-tree-column方式：后台返回数据结构为多层，为全部数据，适合层级不多的情况，如果层级过多接口可能会慢，影响性能。