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