在elemenUI基础上，开发面板级联
最近开发的项目需要做图中左边这样的级联效果，但是elementUI提供的面板级联案例无法满足项目所需要的功能，所以自己手写一个
现附上代码记录一下，代码是静态页面，数据都是假的，并且有些数据绑定是随便绑定的一个值，交互没有做，纯粹记录一下
<template>
<div class="campus">
<el-row :gutter="24">
<el-col :span="14">
<div style="max-height: calc(100vh - 60px);background-color: #ffffff;overflow: auto">
<div class="cascade_content">
<div class="cascade_col">
<div class="cascade_header">
<span>院区 <el-button style="float: right; padding: 0;line-height: 57px" type="text"><i
class="el-icon-search"></i></el-button></span>
<span><el-button style="padding: 3px 0" type="text">新增</el-button> 共计：{{campus.length}}个</span>
</div>
<div class="cascade_item" v-for="(item,index) in campus" :key="index" :class="item.id===current.campus?'is-choose':''" @click="chooseItem('campus',item)">
<div>{{item.name}}</div>
<div>
<el-button style="padding: 3px 0;" type="text"><i
class="el-icon-edit"></i></el-button>
<el-button style="padding: 3px 0" type="text"><i
class="el-icon-delete"></i></el-button>
</div>
</div>
</div>
<div class="cascade_col">
<div class="cascade_header">
<span>建筑物 <el-button style="float: right; padding: 0;line-height: 57px" type="text"><i
class="el-icon-search"></i></el-button></span>
<span><el-button v-show="building.length" style="padding: 3px 0" type="text">新增</el-button> 共计：{{building.length}}个</span>
</div>
<div class="cascade_item" v-for="(item,index) in building" :key="index" :class="item.id===current.building?'is-choose':''" @click="chooseItem('building',item)">
<div>{{item.name}}</div>
<div>
<el-button style="padding: 3px 0;" type="text"><i
class="el-icon-edit"></i></el-button>
<el-button style="padding: 3px 0" type="text"><i
class="el-icon-delete"></i></el-button>
</div>
</div>
</div>
<div class="cascade_col">
<div class="cascade_header">
<span>楼层 <el-button style="float: right; padding: 0;line-height: 57px" type="text"><i
class="el-icon-search"></i></el-button></span>
<span><el-button v-show="floor.length" style="padding: 3px 0" type="text">新增</el-button> 共计：{{floor.length}}个</span>
</div>
<div class="cascade_item" v-for="(item,index) in floor" :key="index" :class="item.id===current.floor?'is-choose':''" @click="chooseItem('floor',item)">
<div>{{item.name}}</div>
<div>
<el-button style="padding: 3px 0;" type="text"><i
class="el-icon-edit"></i></el-button>
<el-button style="padding: 3px 0" type="text"><i
class="el-icon-delete"></i></el-button>
</div>
</div>
</div>
<div class="cascade_col">
<div class="cascade_header">
<span>房间 <el-button style="float: right; padding: 0;line-height: 57px" type="text"><i
class="el-icon-search"></i></el-button></span>
<span><el-button v-show="room.length" style="padding: 3px 0" type="text">新增</el-button> 共计：{{room.length}}个</span>
</div>
<div class="cascade_item" v-for="(item,index) in room" :key="index" :class="item.id===current.room?'is-choose':''" @click="chooseItem('room',item)">
<div>{{item.name}}</div>
<div>
<el-button style="padding: 3px 0;" type="text"><i
class="el-icon-edit"></i></el-button>
<el-button style="padding: 3px 0" type="text" ><i
class="el-icon-delete"></i></el-button>
</div>
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="10">
<el-card class="right_box" shadow="never">
<div slot="header" class="clearfix">
<span class="header_title">房间信息</span>
<template v-if="!isEdit">
<el-button style="float: right; padding: 3px 0" type="text" @click="deleteTree"><i
class="el-icon-delete"></i></el-button>
<el-button style="float: right; padding: 3px 0;margin-right: 20px" type="text" @click="editRoomDetail"><i
class="el-icon-edit"></i></el-button>
</template>
<template v-else>
<el-button size="mini" style="float: right;" @click="editRoomDetail">取消</el-button>
<el-button size="mini" style="float: right;margin-right: 10px" type="primary" @click="saveEdit">保存
</el-button>
</template>
</div>
<div class="text item">
<el-form ref="form" :model="roomDetail" label-width="200px" size="mini" label-position="left">
<div class="form_title">基础信息</div>
<el-form-item label="房间名称">
<span slot="label">房间名称 ： </span>
<el-input v-if="isEdit" v-model="roomDetail.name"></el-input>
<span v-else class="value">{{roomDetail.name|| '-'}}</span>
</el-form-item>
<el-form-item label="房间编号">
<span slot="label">房间编号 ： </span>
<el-input v-if="isEdit" v-model="roomDetail.num"></el-input>
<span v-else class="value">{{roomDetail.num|| '-'}}</span>
</el-form-item>
<el-form-item label="房间类型">
<span slot="label">房间类型 ： </span>
<el-select v-if="isEdit" v-model="roomDetail.type" placeholder="请选择">
<el-option label="房间" value="房间"></el-option>
<el-option label="区域" value="区域"></el-option>
</el-select>
<span v-else class="value">{{roomDetail.num|| '-'}}</span>
</el-form-item>
<el-form-item label="使用科室">
<span slot="label">使用科室 ： </span>
<el-select v-if="isEdit" v-model="roomDetail.useType" placeholder="请选择">
<el-option label="房间" value="房间"></el-option>
<el-option label="区域" value="区域"></el-option>
</el-select>
<span v-else class="value">{{roomDetail.useType|| '-'}}</span>
</el-form-item>
<el-form-item label="面积">
<span slot="label">面积：</span>
<el-input v-if="isEdit" v-model="roomDetail.area"></el-input>
<span v-else class="value">{{roomDetail.area|| '-'}}</span>
</el-form-item>
<el-form-item label="朝向">
<span slot="label">朝向 ： </span>
<el-select v-if="isEdit" v-model="roomDetail.direction" placeholder="请选择">
<el-option label="房间" value="房间"></el-option>
<el-option label="区域" value="区域"></el-option>
</el-select>
<span v-else class="value">{{roomDetail.num|| '-'}}</span>
</el-form-item>
<div class="form_title">环境要求</div>
<el-form-item label="额定温度(℃)">
<span slot="label">额定温度(℃) ： </span>
<template v-if="isEdit">
<el-input-number v-model="roomDetail.minTemperature" controls-position="right"></el-input-number>~
<el-input-number v-model="roomDetail.maxTemperature" controls-position="right"></el-input-number>
</template>
<span v-else class="value">{{roomDetail.minTemperature}}~{{roomDetail.maxTemperature}}</span>
</el-form-item>
<el-form-item label="额定温度(℃)">
<span slot="label">额定温度(℃) ： </span>
<template v-if="isEdit">
<el-input-number v-model="roomDetail.minHumidity" controls-position="right"></el-input-number>~
<el-input-number v-model="roomDetail.maxHumidity" controls-position="right"></el-input-number>
</template>
<span v-else class="value">{{roomDetail.minHumidity}}~{{roomDetail.maxHumidity}}</span>
</el-form-item>
<el-form-item label="额定气压(hPa)">
<span slot="label">额定气压(hPa) ： </span>
<template v-if="isEdit">
<el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
<el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
<div>注：1hPa = 100Pa</div>
</template>
<span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
</el-form-item>
<el-form-item label="颗粒物(mg/m³)">
<span slot="label">颗粒物(mg/m³) ： </span>
<template v-if="isEdit">
<el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
<el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
</template>
<span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
</el-form-item>
<el-form-item label="TVOC(mg/m³)">
<span slot="label">TVOC(mg/m³) ： </span>
<template v-if="isEdit">
<el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
<el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
</template>
<span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
</el-form-item>
<el-form-item label="光照(lx)">
<span slot="label">光照(lx) ： </span>
<template v-if="isEdit">
<el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
<el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
</template>
<span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
</el-form-item>
<el-form-item label="CO2浓度(mg/m³)">
<span slot="label">CO2浓度(mg/m³) ： </span>
<template v-if="isEdit">
<el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
<el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
</template>
<span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
</el-form-item>
<el-form-item label="房间开门要求">
<span slot="label">房间开门要求 ： </span>
<template v-if="isEdit">
<el-radio v-model="roomDetail.doorStatus" label="1">无要求</el-radio>
<el-radio v-model="roomDetail.doorStatus" label="2">常开</el-radio>
<el-radio v-model="roomDetail.doorStatus" label="3">常闭</el-radio>
</template>
<span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
</el-form-item>
</el-form>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "platform-campus",
data() {
return {
isEdit: false,
current:{
campus:null,
building:null,
floor:null,
room:null,
},
campus:[
{ id:1, name:'默认园区',}
],
roomDetail: {},
building:[ ],
floor:[ ],
room:[ ]
}
},
methods: {
chooseItem(item,data){
this.current[item] = data.id
if (item==='campus'){
this.building=[
{ id:1, name:'住院部',},
{ id:2, name:'门诊楼',},
{ id:3, name:'检验科',},
{ id:4, name:'放射楼',},
]
}
if (item==='building'){
this.floor=[
{ id:1, name:'1层',},
{ id:2, name:'2层',},
{ id:3, name:'2层',},
{ id:4, name:'2层',},
{ id:5, name:'2层',}
]
}
if (item==='floor'){
this.room=[
{ id:1, name:'急救室',},
{ id:2, name:'ICU',},
{ id:3, name:'手术室',},
]
}
},
editRoomDetail() {
this.isEdit = !this.isEdit
},
deleteTree() {
this.$message('删除科室')
},
saveEdit() {
// 在这里提交修改
this.editRoomDetail()
}
}
}
</script>
<style scoped>
.campus {
margin: 5px 20px;
}
.header_title {
font-size: 16px;
}
.cascade_header {
width: 100%;
height: 57px;
display: flex;
flex-direction: row;
}
.cascade_header {
min-width: 210px;
border-bottom: 1px solid #eee;
font-size: 16px;
line-height: 57px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cascade_header span {
margin: 0 10px;
}
.cascade_header span a {
font-size: 14px;
color: #20a0ff;
}
.cascade_header span:nth-child(2) {
font-size: 14px;
}
/deep/ .el-cascade-menu {
width: 25%;
/*min-width: 200px;*/
}
.cascade_content {
border-top: 1px solid #eee;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
color: rgba(0,0,0,.65);;
}
.cascade_col {
width: 25%;
min-width: 210px;
border-right: 1px solid #eee
}
.cascade_item {
width: 100%;
height: 44px;
box-sizing: border-box;
line-height: 44px;
font-size: 14px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
border-bottom: 1px solid #eee;
}
.cascade_item div{
margin: 0 10px;
}
.is-choose{
background-color: #99d2fb;
}
.form_title{
font-size: 16px;
margin-bottom: 20px;
color: rgba(0,0,0,.65);
font-weight: bold;
}
/deep/ label {
font-weight: normal;
}
</style>
![[开发笔记]-winfom ListBox控件选中项上下移动排序](http://images.cnitblog.com/blog/322940/201306/01192455-2e180ccf7f624edab3aa1634e06bcdab.jpg)
