• Vue-SplitPane可拖拽分隔面板（随意拖动div）

    npm install vue-splitpane

    一、使用

    （1）局部使用：

    在vue文件中

    1. import splitPane from 'vue-splitpane'
    2. export default {
    3.     componnets: { splitPane }
    4. }

    （2）全局使用：

    在main.js文件注册

    1. import splitPane from 'vue-splitpane'
    2. // 注册为全局组件
    3. Vue.component('split-pane', splitPane);

    二、使用局部在vue文件中使用例子

    先分割成左右（注意只能两个两个分割，自由选择竖直还是水平分割）

    重点是：

    1.  <split-pane
    2.       split="vertical"
    3.       @resize="resizeSplit"
    4.       :default-percent="defaultPercent1"
    5.     >
    6.       <template slot="paneL">template>
    7.       <template slot="paneR">template>
    8. split-pane>

    html：代码

    data代码：

    1. defaultPercent1:
    2.         sessionStorage.getItem("defaultPercent1") == null
    3.           ? 50
    4.           : parseFloat(sessionStorage.getItem("defaultPercent1")),
    5.       defaultPercent2:
    6.         sessionStorage.getItem("defaultPercent2") == null
    7.           ? 20
    8.           : parseFloat(sessionStorage.getItem("defaultPercent2")),
    9.       defaultPercent3:
    10.         sessionStorage.getItem("defaultPercent3") == null
    11.           ? 20
    12.           : parseFloat(sessionStorage.getItem("defaultPercent3")),
    13.       defaultPercent4:
    14.         sessionStorage.getItem("defaultPercent4") == null
    15.           ? 25
    16.           : parseFloat(sessionStorage.getItem("defaultPercent4")),

    method代码：

    所有代码

    2. <template>
    3. <div id="container">
    4.   <split-pane
    5.     split="vertical"
    6.     @resize="resizeSplit"
    7.     :default-percent="defaultPercent1"
    8.   >
    9.     <template slot="paneL">
    10.       <split-pane
    11.         split="horizontal"
    12.         :default-percent="defaultPercent2"
    13.         @resize="resizeSplit2"
    14.       >
    15.         <template slot="paneL">
    16.           <div class="topLeft">
    17.             <div class="title">空域div>
    18.             <div class="contentTable">
    19.               <el-table
    20.                 :data="maneuverTable"
    21.                 border
    22.                 height="100%"
    23.                 :cell-style="customCellStyle"
    24.               >
    25.                 <el-table-column
    26.                   prop="beginTime"
    27.                   align="center"
    28.                   label="日期"
    29.                   width="100"
    30.                 >
    31.                 el-table-column>
    32.                 <el-table-column prop="content" align="center" label="内容">
    33.                 el-table-column>
    34.                 <el-table-column
    35.                   prop="source"
    36.                   align="center"
    37.                   label="通报单位"
    38.                   width="100"
    39.                 >
    40.                 el-table-column>
    41.               el-table>
    42.             div>
    43.           div>
    44.         template>
    45.         <template slot="paneR">
    46.           <div class="bottomLeft">
    47.             <div class="title">军方活动div>
    48.             <div class="contentTable">
    49.               <el-table
    50.                 :data="militaryTable"
    51.                 border
    52.                 height="100%"
    53.                 :cell-style="customCellStyle"
    54.               >
    55.                 <el-table-column
    56.                   prop="beginTime"
    57.                   align="center"
    58.                   label="日期"
    59.                   width="100"
    60.                 >
    61.                 el-table-column>
    62.                 <el-table-column prop="content" align="center" label="内容">
    63.                 el-table-column>
    64.                 <el-table-column
    65.                   prop="source"
    66.                   align="center"
    67.                   label="通报单位"
    68.                   width="100"
    69.                 >
    70.                 el-table-column>
    71.               el-table>
    72.             div>
    73.           div>
    74.         template>
    75.       split-pane>
    76.     template>
    77.     <template slot="paneR">
    78.       <split-pane
    79.         split="horizontal"
    80.         :default-percent="defaultPercent3"
    81.         @resize="resizeSplit3"
    82.       >
    83.         <template slot="paneL">
    84.           <div class="topRight">
    85.             <div class="title">设备div>
    86.             <div class="contentTable multi-rmk-col">
    87.               <el-table
    88.                 :data="deviceTable"
    89.                 border
    90.                 height="100%"
    91.                 :cell-style="customCellStyle"
    92.               >
    93.                 <el-table-column
    94.                   prop="beginTime"
    95.                   align="center"
    96.                   label="日期"
    97.                   width="100"
    98.                 >
    99.                 el-table-column>
    100.                 <el-table-column prop="content" align="center" label="内容">
    101.                 el-table-column>
    102.                 <el-table-column
    103.                   prop="source"
    104.                   align="center"
    105.                   label="通报单位"
    106.                   width="100"
    107.                 >
    108.                 el-table-column>
    109.               el-table>
    110.             div>
    111.           div>
    112.         template>
    113.         <template slot="paneR">
    114.           <split-pane
    115.             split="horizontal"
    116.             :default-percent="defaultPercent4"
    117.             @resize="resizeSplit4"
    118.           >
    119.             <template slot="paneL">
    120.               <div class="brTop">
    121.         <div class="title">限制div>
    122.         <div class="contentTable">
    123.           <el-table
    124.             :data="limitationTable"
    125.             border
    126.             height="100% "
    127.             :cell-style="customCellStyle"
    128.           >
    129.             <el-table-column
    130.               prop="beginTime"
    131.               align="center"
    132.               label="日期"
    133.               width="100"
    134.             >
    135.             el-table-column>
    136.             <el-table-column prop="content" align="center" label="内容">
    137.             el-table-column>
    138.             <el-table-column
    139.               prop="source"
    140.               align="center"
    141.               label="通报单位"
    142.               width="100"
    143.             >
    144.             el-table-column>
    145.           el-table>
    146.         div>
    147.       div>
    148.             template>
    149.             <template slot="paneR">
    150.               <div class="brBottom">
    151.         <div class="title">通航div>
    152.         <div class="contentTable">
    153.           <el-table
    154.             :data="airTable"
    155.             border
    156.             height="100%"
    157.             :cell-style="customCellStyle"
    158.           >
    159.             <el-table-column
    160.               prop="beginTime"
    161.               align="center"
    162.               label="日期"
    163.               width="100"
    164.             >
    165.             el-table-column>
    166.             <el-table-column prop="content" align="center" label="内容">
    167.             el-table-column>
    168.             <el-table-column
    169.               prop="source"
    170.               align="center"
    171.               label="通报单位"
    172.               width="100"
    173.             >
    174.             el-table-column>
    175.           el-table>
    176.         div>
    177.       div>
    178.             template>
    179.           split-pane>
    180.         template>
    181.       split-pane>
    182.     template>
    183.   split-pane>
    184. div>
    185. template>
    186.  
    187. <script>
    188. import splitPane from "vue-splitpane";
    189. import axios from "axios";
    190. import { getAtcRecord } from "@/api/operationInformation.js";
    191. let getDataInt = null; //获取各业务数据定时返回的ID
    192. export default {
    193. components: { splitPane },
    194. data() {
    195.   return {
    196.     items: "",
    197.     airTable: [],
    198.     limitationTable: [],
    199.     deviceTable: [],
    200.     militaryTable: [],
    201.     maneuverTable: [],
    202.  
    203.     // div变动
    204.     defaultPercent1:
    205.       sessionStorage.getItem("defaultPercent1") == null
    206.         ? 50
    207.         : parseFloat(sessionStorage.getItem("defaultPercent1")),
    208.     defaultPercent2:
    209.       sessionStorage.getItem("defaultPercent2") == null
    210.         ? 20
    211.         : parseFloat(sessionStorage.getItem("defaultPercent2")),
    212.     defaultPercent3:
    213.       sessionStorage.getItem("defaultPercent3") == null
    214.         ? 20
    215.         : parseFloat(sessionStorage.getItem("defaultPercent3")),
    216.     defaultPercent4:
    217.       sessionStorage.getItem("defaultPercent4") == null
    218.         ? 25
    219.         : parseFloat(sessionStorage.getItem("defaultPercent4")),
    220.   };
    221. },
    222. mounted() {
    223.   //监听页面显隐状态
    224.   window.addEventListener("message", (event) => {
    225.     let topic = event.data.closeIframe;
    226.     if (topic) {
    227.       window.clearInterval(getDataInt);
    228.     } else if (topic == false) {
    229.       if (getDataInt) {
    230.         window.clearInterval(getDataInt);
    231.       }
    232.       //开启轮询模式
    233.       this.setIntervalMethod();
    234.     }
    235.   });
    236.  
    237.   //开启轮询模式
    238.   this.setIntervalMethod();
    239. },
    240. methods: {
    241.   //开启轮询模式
    242.   setIntervalMethod() {
    243.     this.onQuery();
    244.     //定时每2秒获取一次各业务数据
    245.     this.$nextTick(() => {
    246.       getDataInt = setInterval(() => {
    247.         this.onQuery();
    248.       }, 2000);
    249.     });
    250.   },
    251.  
    252.   onQuery() {
    253.     axios
    254.       .get(window.operationInformationPath)
    255.       .then((res) => {
    256.         this.items = res.data.data;
    257.         if (Array.isArray(this.items)) {
    258.           for (let x of this.items) {
    259.             x.beginTime = this.parseTime(x.beginTime);
    260.           }
    261.           const filteredData = this.items.filter(
    262.             (item) => item.dept === "进近管制室"
    263.           );
    264.           this.limitationTable = filteredData.filter(
    265.             (record) => record.type === "限制相邻"
    266.           );
    267.           this.deviceTable = filteredData.filter(
    268.             (record) => record.type === "设备"
    269.           );
    270.           this.militaryTable = filteredData.filter(
    271.             (record) => record.type === "军航活动"
    272.           );
    273.           this.airTable = filteredData.filter(
    274.             (record) => record.type === "通用航空"
    275.           );
    276.           this.maneuverTable = filteredData.filter(
    277.             (record) => record.type === "机动空域"
    278.           );
    279.         }
    280.       })
    281.       .catch((error) => {
    282.         console.log(error);
    283.       });
    284.  
    285.     // getAtcRecord().then((res) => {
    286.     //   console.log(res)
    287.     // })
    288.   },
    289.   parseTime(originalDateString) {
    290.     // 创建日期对象
    291.     const date = new Date(originalDateString);
    292.     // 获取日期、小时和分钟
    293.     const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，需要加1
    294.     const day = date.getDate().toString().padStart(2, "0");
    295.     const hours = date.getHours().toString().padStart(2, "0");
    296.     const minutes = date.getMinutes().toString().padStart(2, "0");
    297.     // 格式化日期
    298.     const formattedDate = `${month}-${day} ${hours}:${minutes}`;
    299.     return formattedDate;
    300.   },
    301.   customCellStyle({ row, column }) {
    302.     if (column.property === "source") {
    303.       return {
    304.         "text-align": "center", // 设置内容水平居中
    305.       };
    306.     } else {
    307.       return {
    308.         "text-align": "left", // 设置内容左对齐
    309.       };
    310.     }
    311.   },
    312.  
    313.   // div随意变动
    314.   resizeSplit(val) {
    315.     this.defaultPercent1 = val;
    316.     sessionStorage.setItem("defaultPercent1", this.defaultPercent1);
    317.   },
    318.   resizeSplit2(val) {
    319.     this.defaultPercent2 = val;
    320.     sessionStorage.setItem("defaultPercent2", this.defaultPercent2);
    321.   },
    322.   resizeSplit3(val) {
    323.     this.defaultPercent3 = val;
    324.     sessionStorage.setItem("defaultPercent3", this.defaultPercent3);
    325.   },
    326.   resizeSplit4(val) {
    327.     this.defaultPercent4 = val;
    328.     sessionStorage.setItem("defaultPercent4", this.defaultPercent4);
    329.   },
    330. },
    331. };
    332. script>
    333.  
    334. <style scoped>
    335. #container {
    336. width: 100%;
    337. height: 100%;
    338. padding: 10px;
    339. }
    340.  
    341. .topLeft {
    342. height: 100%;
    343. width: calc(100% - 4px);
    344. margin-right: 4px;
    345. display: flex;
    346. flex-direction: column;
    347. padding: 10px;
    348. background-color: #4a4a4a;
    349. }
    350. .topRight {
    351. height: 100%;
    352. display: flex;
    353. flex-direction: column;
    354. padding: 10px;
    355. background-color: #4a4a4a;
    356. }
    357. .bottomLeft {
    358. width: calc(100% - 4px);
    359. margin-right: 4px;
    360. height: calc(100% - 8px);
    361. margin-top: 8px;
    362. display: flex;
    363. flex-direction: column;
    364. padding: 10px;
    365. background-color: #4a4a4a;
    366. }
    367.  
    368. .brTop {
    369. height: calc(100% - 8px);
    370. margin-top: 8px;
    371. display: flex;
    372. flex-direction: column;
    373. padding: 10px;
    374. background-color: #4a4a4a;
    375. }
    376. .brBottom {
    377. height: calc(100% - 8px);
    378. margin-top: 8px;
    379. display: flex;
    380. flex-direction: column;
    381. padding: 10px;
    382. background-color: #4a4a4a;
    383. }
    384. .title {
    385. height: 26px;
    386. color: #9fe1f9;
    387. font-weight: 700;
    388. font-size: 16px;
    389. padding-left: 5px;
    390. }
    391. .contentTable {
    392. flex: 1;
    393. height: calc(100% - 26px);
    394. overflow: auto;
    395. }
    396. .contentTable >>> .el-table__body-wrapper::-webkit-scrollbar {
    397. width: 10px;
    398. height: 8px;
    399. }
    400. /* 修改每行高度 */
    401. /* .topRight >>> .el-table__row {
    402. height: 100px !important;
    403. } */
    404. /* .splitter-pane-resizer {
    405. background: transparent!important;
    406. } */
    407. .vue-splitter-container >>> .splitter-pane-resizer{
    408. background: transparent!important;
    409. }
    410. style>

  • 相关阅读:
    Axure RP医疗在线挂号问诊原型图医院APP原形模板
    FPGA的DQPSK调制解调Verilog
    Node与ES6模块
    一、综合——通信职业道德
    4K投影仪为什么比1080P投影仪更值得买？答案显而易见！
    数据结构中的判定转状态+扫描线：P1502
    计算机毕业设计Java电子产品购物平台(源码+系统+mysql数据库+lw文档)
    非分布式-多线程事务控制核心代码1
    OOP面向对象编程
    剑指offer——JZ25 合并两个排序的链表 解题思路与具体代码【C++】
  • 原文地址：https://blog.csdn.net/qq_42192641/article/details/134253667