vue 动态表格+表格合并

整体实现原理： 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!!');
		}
	})	
},