npm install vue-splitpane
1. Use
(1) Topical use:
in vue file
import splitPane from 'vue-splitpane'
export default {
componnets: { splitPane }
}
(2) Global use:
Register in main.js file
import splitPane from 'vue-splitpane'
//Register as global component
Vue.component('split-pane', splitPane);
2. Example of using local parts in vue files
First divide it into left and right parts (note that it can only be divided into two, you can choose to divide it vertically or horizontally)
The point is:
<split-pane
split="vertical"
@resize="resizeSplit"
:default-percent="defaultPercent1"
>
<template slot="paneL"></template>
<template slot="paneR"></template>
</split-pane>
html: code
data code:
defaultPercent1:
sessionStorage.getItem("defaultPercent1") == null
? 50
: parseFloat(sessionStorage.getItem("defaultPercent1")),
defaultPercent2:
sessionStorage.getItem("defaultPercent2") == null
? 20
: parseFloat(sessionStorage.getItem("defaultPercent2")),
defaultPercent3:
sessionStorage.getItem("defaultPercent3") == null
? 20
: parseFloat(sessionStorage.getItem("defaultPercent3")),
defaultPercent4:
sessionStorage.getItem("defaultPercent4") == null
? 25
: parseFloat(sessionStorage.getItem("defaultPercent4")),
method code:
All codes
<!--
* @Author: GGbond
* @Description:
* @Date: 2023-11-01 10:35:05
* @LastEditTime: 2023-11-06 19:50:21
-->
<template>
<div id="container">
<split-pane
split="vertical"
@resize="resizeSplit"
:default-percent="defaultPercent1"
>
<template slot="paneL">
<split-pane
split="horizontal"
:default-percent="defaultPercent2"
@resize="resizeSplit2"
>
<template slot="paneL">
<div class="topLeft">
<div class="title">Empty space</div>
<div class="contentTable">
<el-table
:data="maneuverTable"
border
height="100%"
:cell-style="customCellStyle"
>
<el-table-column
prop="beginTime"
align="center"
label="Date"
width="100"
>
</el-table-column>
<el-table-column prop="content" align="center" label="content">
</el-table-column>
<el-table-column
prop="source"
align="center"
label="Notifying unit"
width="100"
>
</el-table-column>
</el-table>
</div>
</div>
</template>
<template slot="paneR">
<div class="bottomLeft">
<div class="title">Military activities</div>
<div class="contentTable">
<el-table
:data="militaryTable"
border
height="100%"
:cell-style="customCellStyle"
>
<el-table-column
prop="beginTime"
align="center"
label="Date"
width="100"
>
</el-table-column>
<el-table-column prop="content" align="center" label="content">
</el-table-column>
<el-table-column
prop="source"
align="center"
label="Notifying unit"
width="100"
>
</el-table-column>
</el-table>
</div>
</div>
</template>
</split-pane>
</template>
<template slot="paneR">
<split-pane
split="horizontal"
:default-percent="defaultPercent3"
@resize="resizeSplit3"
>
<template slot="paneL">
<div class="topRight">
<div class="title">Equipment</div>
<div class="contentTable multi-rmk-col">
<el-table
:data="deviceTable"
border
height="100%"
:cell-style="customCellStyle"
>
<el-table-column
prop="beginTime"
align="center"
label="Date"
width="100"
>
</el-table-column>
<el-table-column prop="content" align="center" label="content">
</el-table-column>
<el-table-column
prop="source"
align="center"
label="Notifying unit"
width="100"
>
</el-table-column>
</el-table>
</div>
</div>
</template>
<template slot="paneR">
<split-pane
split="horizontal"
:default-percent="defaultPercent4"
@resize="resizeSplit4"
>
<template slot="paneL">
<div class="brTop">
<div class="title">Restrictions</div>
<div class="contentTable">
<el-table
:data="limitationTable"
border
height="100% "
:cell-style="customCellStyle"
>
<el-table-column
prop="beginTime"
align="center"
label="Date"
width="100"
>
</el-table-column>
<el-table-column prop="content" align="center" label="content">
</el-table-column>
<el-table-column
prop="source"
align="center"
label="Notifying unit"
width="100"
>
</el-table-column>
</el-table>
</div>
</div>
</template>
<template slot="paneR">
<div class="brBottom">
<div class="title">General navigation</div>
<div class="contentTable">
<el-table
:data="airTable"
border
height="100%"
:cell-style="customCellStyle"
>
<el-table-column
prop="beginTime"
align="center"
label="Date"
width="100"
>
</el-table-column>
<el-table-column prop="content" align="center" label="content">
</el-table-column>
<el-table-column
prop="source"
align="center"
label="Notifying unit"
width="100"
>
</el-table-column>
</el-table>
</div>
</div>
</template>
</split-pane>
</template>
</split-pane>
</template>
</split-pane>
</div>
</template>
<script>
import splitPane from "vue-splitpane";
import axios from "axios";
import { getAtcRecord } from "@/api/operationInformation.js";
let getDataInt = null; //Get the ID returned regularly for each business data
export default {
components: { splitPane },
data() {
return {
items: "",
airTable: [],
limitationTable: [],
deviceTable: [],
militaryTable: [],
maneuverTable: [],
//div changes
defaultPercent1:
sessionStorage.getItem("defaultPercent1") == null
? 50
: parseFloat(sessionStorage.getItem("defaultPercent1")),
defaultPercent2:
sessionStorage.getItem("defaultPercent2") == null
? 20
: parseFloat(sessionStorage.getItem("defaultPercent2")),
defaultPercent3:
sessionStorage.getItem("defaultPercent3") == null
? 20
: parseFloat(sessionStorage.getItem("defaultPercent3")),
defaultPercent4:
sessionStorage.getItem("defaultPercent4") == null
? 25
: parseFloat(sessionStorage.getItem("defaultPercent4")),
};
},
mounted() {
//Monitor the visible and hidden status of the page
window.addEventListener("message", (event) => {
let topic = event.data.closeIframe;
if (topic) {
window.clearInterval(getDataInt);
} else if (topic == false) {
if (getDataInt) {
window.clearInterval(getDataInt);
}
//Enable polling mode
this.setIntervalMethod();
}
});
//Enable polling mode
this.setIntervalMethod();
},
methods: {
//Enable polling mode
setIntervalMethod() {
this.onQuery();
//Timing to obtain each business data every 2 seconds
this.$nextTick(() => {
getDataInt = setInterval(() => {
this.onQuery();
}, 2000);
});
},
onQuery() {
axios
.get(window.operationInformationPath)
.then((res) => {
this.items = res.data.data;
if (Array.isArray(this.items)) {
for (let x of this.items) {
x.beginTime = this.parseTime(x.beginTime);
}
const filteredData = this.items.filter(
(item) => item.dept === "Approach Control Room"
);
this.limitationTable = filteredData.filter(
(record) => record.type === "Limit adjacency"
);
this.deviceTable = filteredData.filter(
(record) => record.type === "device"
);
this.militaryTable = filteredData.filter(
(record) => record.type === "Military Aviation Activities"
);
this.airTable = filteredData.filter(
(record) => record.type === "General Aviation"
);
this.maneuverTable = filteredData.filter(
(record) => record.type === "Motor Airspace"
);
}
})
.catch((error) => {
console.log(error);
});
// getAtcRecord().then((res) => {
// console.log(res)
// })
},
parseTime(originalDateString) {
//Create date object
const date = new Date(originalDateString);
// Get date, hour and minutes
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // The month starts from 0 and needs to be added by 1
const day = date.getDate().toString().padStart(2, "0");
const hours = date.getHours().toString().padStart(2, "0");
const minutes = date.getMinutes().toString().padStart(2, "0");
//Format date
const formattedDate = `${month}-${day} ${hours}:${minutes}`;
return formattedDate;
},
customCellStyle({ row, column }) {
if (column.property === "source") {
return {
"text-align": "center", // Set the content to be horizontally centered
};
} else {
return {
"text-align": "left", // Set content to left alignment
};
}
},
// div can be changed at will
resizeSplit(val) {
this.defaultPercent1 = val;
sessionStorage.setItem("defaultPercent1", this.defaultPercent1);
},
resizeSplit2(val) {
this.defaultPercent2 = val;
sessionStorage.setItem("defaultPercent2", this.defaultPercent2);
},
resizeSplit3(val) {
this.defaultPercent3 = val;
sessionStorage.setItem("defaultPercent3", this.defaultPercent3);
},
resizeSplit4(val) {
this.defaultPercent4 = val;
sessionStorage.setItem("defaultPercent4", this.defaultPercent4);
},
},
};
</script>
<style scoped>
#container {
width: 100%;
height: 100%;
padding: 10px;
}
.topLeft {
height: 100%;
width: calc(100% - 4px);
margin-right: 4px;
display: flex;
flex-direction: column;
padding: 10px;
background-color: #4a4a4a;
}
.topRight {
height: 100%;
display: flex;
flex-direction: column;
padding: 10px;
background-color: #4a4a4a;
}
.bottomLeft {
width: calc(100% - 4px);
margin-right: 4px;
height: calc(100% - 8px);
margin-top: 8px;
display: flex;
flex-direction: column;
padding: 10px;
background-color: #4a4a4a;
}
.brTop {
height: calc(100% - 8px);
margin-top: 8px;
display: flex;
flex-direction: column;
padding: 10px;
background-color: #4a4a4a;
}
.brBottom {
height: calc(100% - 8px);
margin-top: 8px;
display: flex;
flex-direction: column;
padding: 10px;
background-color: #4a4a4a;
}
.title {
height: 26px;
color: #9fe1f9;
font-weight: 700;
font-size: 16px;
padding-left: 5px;
}
.contentTable {
flex: 1;
height: calc(100% - 26px);
overflow: auto;
}
.contentTable >>> .el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 8px;
}
/* Modify the height of each row */
/* .topRight >>> .el-table__row {
height: 100px !important;
} */
/* .splitter-pane-resizer {
background: transparent!important;
} */
.vue-splitter-container >>> .splitter-pane-resizer{
background: transparent!important;
}
</style>
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry-level skills treewebpack packaging toolFront-end modularization 39759 people are learning the system