devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：很楠不爱3 | 2024-02-11 20:32:28

赞

踩

el-split-pane
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代码：

所有代码

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/76851
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号