整體實現原理： table 套 table

實現效果：

①表格展示

②當前級別部門可進行操作，並對當前選中部門新增active狀態

程式碼解讀：

①表格展示

原理： 部門資料進行樹結構轉化，table for 迴圈當前級別， table內套table

            v-if  進行資料判斷，存在當前級別部門顯示部門名稱，不存在時顯示--

後臺返回資料列表形式，不符合前端展示，進行轉化

// 部門資訊  二叉樹結構
    departmentInfo: function(p){
    	let param = {
			pageNum: 1,
			pageSize: 9999,
			key: p ? p.key : ""
		}
    	let department = [];
		showDepartmentList(param).then((data) => {
			data.list.list.forEach(function(item,i){
				if(item.superiorId == 0){
					if(p && item.departmentName.indexOf(p.key) != -1){
						department.push({value:item.id,label:item.departmentName,superiorId:item.superiorId,children:[]})
					}else if(!p){
						department.push({value:item.id,label:item.departmentName,superiorId:item.superiorId,children:[]})
					}
				}else{
					department.forEach(function(dep,j){
						if(item.superiorId == dep.value){
							dep.children.push({value:item.id,label:item.departmentName,superiorId:item.superiorId,children:[]})
						}
						dep.children.forEach(function(depSecond,z){
							if(item.superiorId == depSecond.value){
								depSecond.children.push({value:item.id,label:item.departmentName,superiorId:item.superiorId,children:[]})
							}
						})
					})
				}	
			})
	    })　
    	return department;
    },
 

二叉樹結構資料進行前端展示： 

<table class="depart_table" style="width: 100%" cellpadding="0" cellspacing="0">
  	<tr>
        <td class="th" style="width: 90px;">序號</td>
        <td class="th">部門名稱</td>
        <td class="th td_2" style="width: 60%;">
        	<table style="width: 100%" cellpadding="0" cellspacing="0">
        		<tr>
        			<td>一級部門</td>
        			<td class="td_2">二級部門</td>
        		</tr>
        	</table>
        </td>
        <!--<th>二級部門</th>-->
  	</tr>
	<tr v-for="(dep,index) in departmentList" >
		<td class="border_bottom border_left_no">{{index+1}}</td>
        <td class="border_bottom enable" v-bind:class="[activeId==dep.value ? 'active' : '']" @click='tdSelect(dep)'>
        	{{dep.label}}
        </td>
        <td class="padding_no">
        	<table style="width: 100%;height: 100%;" cellpadding="0" cellspacing="0">
        		<!-- 僅存在部門時 -->
        		<tr v-if="dep.children.length==0">
        			<td class="border_bottom">--</td>
        			<td class="border_bottom td_2">
        				<table style="width: 100%" cellpadding="0" cellspacing="0">
        					<tr>
        						<td>--</td>
        					</tr>
        				</table>
        			</td>
        		</tr>
        		<!-- 生成1級部門 -->
        		<tr v-else v-for="depFirst in dep.children">
        			<td colspan="2" class="border_bottom enable" v-bind:class="[activeId==depFirst.value ? 'active' : '']" @click='tdSelect(depFirst)'>
        				{{depFirst.label}}
        			</td>
        			<!-- 生成2級部門 -->
        			<td class="td_2">
        				<table style="width: 100%" cellpadding="0" cellspacing="0">
	        				<tr v-if="depFirst.children.length==0">
			        			<td class="border_bottom">--</td>
			        		</tr>
		        			<tr v-else v-for="depSecond in depFirst.children">
			        			<td class="border_bottom enable" v-bind:class="[activeId==depSecond.value ? 'active' : '']" @click='tdSelect(depSecond)'>
			        				{{depSecond.label | defaultStr}}
			        			</td>
			        		</tr>
	        			</table>
        			</td>
        		</tr>
        	</table>
        </td>
	</tr>
</table>
 

②當前級別部門可進行操作，並對當前選中部門新增active狀態

script： data 內宣告資料, 動態繫結class，並存儲當前級別部門資訊

export default {
    data() {
        activeId: "",
        tdSelectList: {
		    id: null,
		    departmentName: "",
		    superiorId: null
		},
    },
    mouted:{
        tdSelect: function(dep){
	        this.tdSelectList = {
		        id: dep.value,                // 當前部門id
		        departmentName: dep.label,    // 當前部門名字
		        superiorId: dep.superiorId    // 當前部門 上級id
		    }
	        this.activeId = dep.value;
	    },
    }
}
 

單元格操作按鈕繫結事件： 對選中的單元格進行操作

<el-button class="pull-right" type="primary" @click="departmentCreatDialogShow()">建立</el-button>
<el-button class="pull-right" type="" @click="departmentModifyDialogShow(1)">修改</el-button>
<el-button class="pull-right" type="" @click="departmentDelete()">刪除</el-button>

<!-- 部門修改 -->
<el-dialog title="部門修改" :visible.sync="departmentModifydialogVisible">
	<el-row>
	    <el-form :model="departmentModifyList" status-icon ref="departmentModifyList" :rules="departmentModifyRules">
	        <el-form-item prop="departmentName">
	        	<el-col :span="3"><div class="grid-content">
	        		{{departmentModifyList.labelName}}
        		</div></el-col>
        	    <el-col :span="21"><div class="grid-content">
        	    	<el-input type="text" v-model="departmentModifyList.departmentName" auto-complete="off"></el-input>
        	    </div></el-col>
	        </el-form-item>
	    </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
        <el-button @click="departmentModifydialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="departmentModifySubmit('departmentModifyList')">確 定</el-button>
    </div>
</el-dialog>

departmentModifySubmit: function(formName){
	this.$refs[formName].validate((valid) => { 
		if (valid) {
			let param = {
        		id: this.tdSelectList.id,
        		departmentName: this.departmentModifyList.departmentName
        	}
        	updateDepartment(param).then((data) => {
  				if(data.succeed){
  					this.departmentModifydialogVisible = false;
  					this.$message({ type:"success", message: data.retMsg });
        			let param2 = {
		      			pageNum: 1,
		      			pageSize: this.departmentPagesize,
		      			key: this.departmentSearch
		      		}
		      		this.departmentGetUser(param2);	
  				}else {
  					this.$message.error(data.ret.retMsg);
  				}
      		})
		}else {
			console.log('error submit!!');
		}
	})	
},