<template>
|
<div class="educationmanagement">
|
<!-- 左侧栏 -->
|
<div class="sidecolumn">
|
<el-menu
|
default-active="2"
|
class="el-menu-vertical-demo"
|
@open="handleOpen"
|
@close="handleClose"
|
background-color="#545c64"
|
text-color="#fff"
|
active-text-color="#ffd04b"
|
>
|
<el-submenu index="1">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>导航一</span>
|
</template>
|
<el-menu-item-group>
|
<template slot="title">分组一</template>
|
<el-menu-item index="1-1">选项1</el-menu-item>
|
<el-menu-item index="1-2">选项2</el-menu-item>
|
</el-menu-item-group>
|
<el-menu-item-group title="分组2">
|
<el-menu-item index="1-3">选项3</el-menu-item>
|
</el-menu-item-group>
|
<el-submenu index="1-4">
|
<template slot="title">选项4</template>
|
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
</el-submenu>
|
</el-submenu>
|
<el-menu-item index="2">
|
<i class="el-icon-menu"></i>
|
<span slot="title">导航二</span>
|
</el-menu-item>
|
<el-menu-item index="3" disabled>
|
<i class="el-icon-document"></i>
|
<span slot="title">导航三</span>
|
</el-menu-item>
|
<el-menu-item index="4">
|
<i class="el-icon-setting"></i>
|
<span slot="title">导航四</span>
|
</el-menu-item>
|
</el-menu>
|
</div>
|
<!-- 右侧数据 -->
|
<div class="leftvlue">
|
<div class="leftvalu-top">
|
<el-tabs
|
v-model="editableTabsValue"
|
type="card"
|
editable
|
@edit="handleTabsEdit"
|
>
|
<el-tab-pane
|
:key="item.name"
|
v-for="(item, index) in editableTabs"
|
:label="item.title"
|
:name="item.name"
|
>
|
{{ item.content }}
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "education",
|
|
data() {
|
return {
|
editableTabsValue: "2",
|
editableTabs: [
|
{
|
title: "Tab 1",
|
name: "1",
|
content: "Tab 1 content",
|
},
|
{
|
title: "Tab 2",
|
name: "2",
|
content: "Tab 2 content",
|
},
|
],
|
tabIndex: 2,
|
};
|
},
|
|
methods: {
|
handleClose(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
handleOpen(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
handleTabsEdit(targetName, action) {
|
if (action === "add") {
|
let newTabName = ++this.tabIndex + "";
|
this.editableTabs.push({
|
title: "New Tab",
|
name: newTabName,
|
content: "New Tab content",
|
});
|
this.editableTabsValue = newTabName;
|
}
|
if (action === "remove") {
|
let tabs = this.editableTabs;
|
let activeName = this.editableTabsValue;
|
if (activeName === targetName) {
|
tabs.forEach((tab, index) => {
|
if (tab.name === targetName) {
|
let nextTab = tabs[index + 1] || tabs[index - 1];
|
if (nextTab) {
|
activeName = nextTab.name;
|
}
|
}
|
});
|
}
|
|
this.editableTabsValue = activeName;
|
this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.educationmanagement {
|
display: flex;
|
}
|
.sidecolumn {
|
width: 300px;
|
min-height: 100vh;
|
text-align: center;
|
// display: flex;
|
margin-top: 20px;
|
margin: 20px;
|
padding: 10px;
|
background: #edf1f7;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.sidecolumn-top {
|
display: flex;
|
justify-content: space-between;
|
.top-wj {
|
font-size: 20px;
|
}
|
.top-tj {
|
font-size: 18px;
|
|
color: rgb(0, 89, 255);
|
cursor: pointer;
|
}
|
}
|
.center-ss {
|
margin-top: 30px;
|
.input-with-select {
|
height: 40px !important;
|
}
|
}
|
.bottom-fl {
|
margin-top: 30px;
|
display: center !important;
|
}
|
}
|
.qrcode-dialo {
|
text-align: center;
|
// display: flex;
|
margin: 20px;
|
padding: 30px;
|
background: #edf1f7;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.qrcode-text {
|
font-size: 20px;
|
span {
|
margin-left: 20px;
|
}
|
}
|
.qrcode-img {
|
width: 300px;
|
height: 400px;
|
}
|
}
|
::v-deep.el-tabs--left,
|
.el-tabs--right {
|
overflow: hidden;
|
align-items: center;
|
display: flex;
|
}
|
::v-deep.el-input--medium .el-input__inner {
|
height: 40px !important;
|
}
|
::v-deep.el-tabs--right .el-tabs__active-bar.is-right {
|
height: 40px;
|
width: 5px;
|
left: 0;
|
}
|
::v-deep.el-tabs--right .el-tabs__item.is-right {
|
display: block;
|
font-size: 20px;
|
}
|
.leftvlue {
|
// display: flex;
|
// flex: 1;
|
width: 80%;
|
margin-top: 20px;
|
// margin: 20px;
|
padding: 30px;
|
background: #ffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.mulsz {
|
font-size: 20px;
|
}
|
}
|
.button-text {
|
color: rgb(70, 204, 238);
|
}
|
.button-textck {
|
color: rgb(39, 167, 67);
|
}
|
.button-textxg {
|
color: rgb(35, 81, 233);
|
}
|
.button-textsc {
|
color: rgb(235, 23, 23);
|
}
|
</style>
|
