devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【sgExcelGrid】自定义组件：简单模拟Excel表格拖拽、选中单元格、横行、纵列、拖拽圈选等操作

作者：小丑西瓜9 | 2024-03-20 15:01:13

赞

踩

【sgExcelGrid】自定义组件：简单模拟Excel表格拖拽、选中单元格、横行、纵列、拖拽圈选等操作

特性：

  1. 可以自定义拖拽过表格
  2. 可以点击某个表格，拖拽右下角小正方形进行任意方向选取单元格
  3. 支持选中某一行、列
  4. 支持监听@selectedGrids、@selectedDatas事件获取选中项的DOM对象和数据数组
  5. 支持props自定义显示label字段别名

 sgExcelGrid源码

  1. <template>
  2.   <div :class="$options.name">
  3.     <div class="ruler-corner"></div>
  4.     <div class="horizontal-ruler" :style="{ left: `${-rulerPosition.x}px` }">
  5.       <div
  6.         class="tick"
  7.         :hoverGrid="hoverGrid.x === A_Z[i]"
  8.         @click="(hoverGrid = { x: A_Z[i] }), (mousedownGrid = {})"
  9.         v-for="(a, i) in A_Z.slice(0, colCount_)"
  10.         :key="i"
  11.       >
  12.         {{ a }}
  13.       </div>
  14.     </div>
  15.     <div class="vertical-ruler" :style="{ top: `${-rulerPosition.y}px` }">
  16.       <div
  17.         class="tick"
  18.         :hoverGrid="hoverGrid.y === i"
  19.         @click="(hoverGrid = { y: i }), (mousedownGrid = {})"
  20.         v-for="(a, i) in Math.ceil(pageSize / colCount_)"
  21.         :key="i"
  22.       >
  23.         {{ i + 1 }}
  24.       </div>
  25.     </div>
  26.     <div class="grids-scroll" ref="scrollContainer">
  27.       <div class="grids" ref="dragContainer" :selectedGrids="selectedGrids.length > 0">
  28.         <div
  29.           class="grid"
  30.           :hoverGridX="hoverGrid.x === gridsData[i].x"
  31.           :hoverGridY="hoverGrid.y === gridsData[i].y"
  32.           :mousedownGrid="
  33.             mousedownGrid.x === gridsData[i].x && mousedownGrid.y === gridsData[i].y
  34.           "
  35.           :dragMove="isMouseDragMove"
  36.           :type="a.strong ? 'primary' : ''"
  37.           v-for="(a, i) in data"
  38.           :key="i"
  39.           @mouseover="hoverGrid = gridsData[i]"
  40.           @click="clickGrid(i)"
  41.           @mouseout="hoverGrid = {}"
  42.         >
  43.           <span :title="a[label]">{{ a[label] }}</span
  44.           ><i class="el-icon-close" @click="del(a)" />
  45.           <div
  46.             class="position-text"
  47.             :title="`点击复制`"
  48.             @click="$g.copy($g.stripHTML(getPositionText(gridsData[i])), true)"
  49.             v-html="getPositionText(gridsData[i])"
  50.           ></div>
  51.           <div class="drag-select-btn" @mousedown.stop="clickResizeHandle"></div>
  52.         </div>
  53.       </div>
  54.     </div>
  55.  
  56.     <!-- 拖拽 -->
  57.     <sgDragMoveTile :data="dragMoveTileData" @scroll="scroll" />
  58.   </div>
  59. </template>
  60. <script>
  61. import sgDragMoveTile from "@/vue/components/admin/sgDragMoveTile";
  62. export default {
  63.   name: "sgExcelGrid",
  64.   components: {
  65.     sgDragMoveTile,
  66.   },
  67.   data() {
  68.     return {
  69.       A_Z: [...Array(26)].map((v, i) => String.fromCharCode(i + 65)),
  70.  
  71.       hoverGrid: {}, //移入的宫格标记
  72.       mousedownGrid: {}, //点击的宫格标记
  73.       gridsData: [], //记录网格宫格状态
  74.       selectedGrids: [], //被选中的网格宫格DOM
  75.       selectedDatas: [], //被选中的网格宫格数据
  76.       rulerPosition: { x: 0, y: 0 },
  77.       dragMoveTileData: {},
  78.       gridWidth: 200,
  79.       gridHeight: 100,
  80.       colCount_: 8,
  81.       pageSize_: 100,
  82.       isMouseDragMove: false, //鼠标拖拽选中移动
  83.       label: `label`, //显示文本字段名
  84.     };
  85.   },
  86.   props: [
  87.     "value",
  88.     "props",
  89.     "data",
  90.     "pageSize", //每页显示多少个宫格
  91.     "colCount", //列数
  92.   ],
  93.   computed: {},
  94.   watch: {
  95.     props: {
  96.       handler(newValue, oldValue) {
  97.         if (newValue && Object.keys(newValue).length) {
  98.           newValue.label && (this.label = newValue.label);
  99.         }
  100.       },
  101.       deep: true, //深度监听
  102.       immediate: true, //立即执行
  103.     },
  104.     pageSize: {
  105.       handler(newValue, oldValue) {
  106.         newValue && (this.pageSize_ = newValue);
  107.       },
  108.       deep: true, //深度监听
  109.       immediate: true, //立即执行
  110.     },
  111.     data: {
  112.       handler(newValue, oldValue) {
  113.         this.init_gridsData();
  114.       },
  115.       deep: true, //深度监听
  116.       immediate: true, //立即执行
  117.     },
  118.     colCount: {
  119.       handler(newValue, oldValue) {
  120.         newValue && (this.colCount_ = newValue);
  121.         this.$nextTick(() => {
  122.           this.$el.style.setProperty("--gridWidth", `${this.gridWidth}px`); //js往css传递局部参数
  123.           this.$el.style.setProperty("--gridHeight", `${this.gridHeight}px`); //js往css传递局部参数
  124.           this.$el.style.setProperty(
  125.             "--gridsWidth",
  126.             `${this.colCount_ * this.gridWidth}px`
  127.           ); //js往css传递局部参数
  128.         });
  129.       },
  130.       deep: true, //深度监听
  131.       immediate: true, //立即执行
  132.     },
  133.     selectedGrids: {
  134.       handler(newValue, oldValue) {
  135.         this.$emit(`selectedGrids`, newValue || []);
  136.       },
  137.       deep: true, //深度监听
  138.       // immediate: true, //立即执行
  139.     },
  140.     selectedDatas: {
  141.       handler(newValue, oldValue) {
  142.         this.$emit(`selectedDatas`, newValue || []);
  143.       },
  144.       deep: true, //深度监听
  145.       // immediate: true, //立即执行
  146.     },
  147.   },
  148.   created() {},
  149.   mounted() {
  150.     this.init_grid_view();
  151.     this.addEvents();
  152.   },
  153.   destroyed() {
  154.     this.removeEvents();
  155.   },
  156.   methods: {
  157.     clickGrid(i) {
  158.       (this.mousedownGrid = this.gridsData[i]),
  159.         (this.hoverGrid = {}),
  160.         this.resetSelectGrid();
  161.       this.selectedGrids = [this.gridsData[i]];
  162.       this.selectedDatas = [this.data[i]];
  163.     },
  164.     clickResizeHandle(e) {
  165.       this.originRect = e.target.parentNode.getBoundingClientRect();
  166.       this.originRect.bottomRightX = this.originRect.x + this.originRect.width; //右下角坐标.x
  167.       this.originRect.bottomRightY = this.originRect.y + this.originRect.height; //右下角坐标.y
  168.       this.__addWindowEvents();
  169.     },
  170.     __addWindowEvents() {
  171.       this.__removeWindowEvents();
  172.       addEventListener("mousemove", this.mousemove_window);
  173.       addEventListener("mouseup", this.mouseup_window);
  174.     },
  175.     __removeWindowEvents() {
  176.       removeEventListener("mousemove", this.mousemove_window);
  177.       removeEventListener("mouseup", this.mouseup_window);
  178.     },
  179.     mousemove_window(e) {
  180.       this.isMouseDragMove = true;
  181.       let { x, y } = e;
  182.       let minWidth = 0,
  183.         minHeight = 0,
  184.         maxWidth = innerWidth,
  185.         maxHeight = innerHeight;
  186.       x < 0 && (x = 0),
  187.         y < 0 && (y = 0),
  188.         x > maxWidth && (x = maxWidth),
  189.         y > maxHeight && (y = maxHeight);
  190.       let style = {};
  191.       style.x = this.originRect.x;
  192.       style.y = this.originRect.y;
  193.       style.width = x - this.originRect.x;
  194.       style.width <= minWidth &&
  195.         ((style.width = Math.abs(style.width)),
  196.         ((style.x = this.originRect.x - style.width),
  197.         (style.width = style.width + this.originRect.width)));
  198.       style.height = y - this.originRect.y;
  199.       style.height <= minHeight &&
  200.         ((style.height = Math.abs(style.height)),
  201.         ((style.y = this.originRect.y - style.height),
  202.         (style.height = style.height + this.originRect.height)));
  203.       style.width > maxWidth && (style.width = maxWidth);
  204.       style.height > maxHeight && (style.height = maxHeight);
  205.       this.calcRectGrid(style);
  206.     },
  207.     mouseup_window(e) {
  208.       this.isMouseDragMove = false;
  209.       this.__removeWindowEvents();
  210.     },
  211.     resetAllGridStatus() {
  212.       this.resetSelectGrid();
  213.       this.mousedownGrid = {};
  214.     },
  215.     resetSelectGrid(d) {
  216.       this.selectedGrids = [];
  217.       this.selectedDatas = [];
  218.       let grids = this.$refs.dragContainer.querySelectorAll(`.grid`);
  219.       grids.forEach((v) => {
  220.         v.removeAttribute("selected-left");
  221.         v.removeAttribute("selected-top");
  222.         v.removeAttribute("selected-right");
  223.         v.removeAttribute("selected-bottom");
  224.         v.removeAttribute("selected");
  225.       });
  226.     },
  227.     // 计算是否选中格子
  228.     calcRectGrid(rect) {
  229.       this.resetSelectGrid();
  230.       this.selectedGrids = this.getSelectedDoms({
  231.         targetDoms: this.$refs.dragContainer.querySelectorAll(`.grid`),
  232.         rect,
  233.       });
  234.       this.selectedGrids.forEach((grid) => {
  235.         let grid_rect = grid.getBoundingClientRect();
  236.         let gridRectScreenWidth = grid_rect.x + grid_rect.width;
  237.         let gridRectScreenHeight = grid_rect.y + grid_rect.height;
  238.         grid_rect.x <= rect.x &&
  239.           rect.x < gridRectScreenWidth &&
  240.           grid.setAttribute("selected-left", true);
  241.         grid_rect.y <= rect.y &&
  242.           rect.y < gridRectScreenHeight &&
  243.           grid.setAttribute("selected-top", true);
  244.         let rectScreenWidth = rect.x + rect.width;
  245.         let rectScreenHeight = rect.y + rect.height;
  246.         grid_rect.x < rectScreenWidth &&
  247.           rectScreenWidth <= grid_rect.x + grid_rect.width &&
  248.           grid.setAttribute("selected-right", true);
  249.         grid_rect.y < rectScreenHeight &&
  250.           rectScreenHeight <= grid_rect.y + grid_rect.height &&
  251.           grid.setAttribute("selected-bottom", true);
  252.         grid.setAttribute("selected", true);
  253.       });
  254.     },
  255.     // 获取被选中的DOM
  256.     getSelectedDoms({ targetDoms, rect } = {}) {
  257.       this.selectedDatas = [];
  258.       return [...targetDoms].filter((targetDom, i) => {
  259.         if (this.$g.isCrash(targetDom, rect)) {
  260.           this.selectedDatas.push(this.data[i]);
  261.           return targetDom;
  262.         }
  263.       }); // 获取被圈选的内容
  264.     },
  265.     // ----------------------------------------
  266.     del(d) {
  267.       this.$emit(`del`, d);
  268.     },
  269.     addEvents(d) {
  270.       this.removeEvents();
  271.       this.__removeWindowEvents();
  272.       addEventListener("resize", this.resize);
  273.     },
  274.     removeEvents(d) {
  275.       removeEventListener("resize", this.resize);
  276.     },
  277.     getPositionText(gridData) {
  278.       return `<span>第${gridData.y + 1}行</span>&nbsp;<span>第${gridData.x}列</span>`;
  279.     },
  280.     init_grid_view() {
  281.       this.resize();
  282.       this.$nextTick(() => {
  283.         this.init_sgDragMoveTile();
  284.       });
  285.     },
  286.     init_gridsData(d) {
  287.       this.gridsData = [...Array(this.pageSize_)].map((v, i) => ({
  288.         x: this.A_Z[i % this.colCount_],
  289.         y: Math.floor(i / this.colCount_),
  290.       }));
  291.       this.$nextTick(() => {
  292.         this.resetAllGridStatus();
  293.       });
  294.     },
  295.     init_sgDragMoveTile() {
  296.       this.dragMoveTileData = {
  297.         scrollContainer: this.$refs.scrollContainer,
  298.         dragContainer: this.$refs.dragContainer,
  299.       };
  300.     },
  301.     resize(d) {
  302.       let scrollContainer = this.$refs.scrollContainer;
  303.       scrollContainer && this.scroll({ target: scrollContainer });
  304.     },
  305.     scroll(e) {
  306.       this.rulerPosition = {
  307.         x: e.target.scrollLeft,
  308.         y: e.target.scrollTop,
  309.       };
  310.     },
  311.   },
  312. };
  313. </script>
  314. <style lang="scss" scoped>
  315. .sgExcelGrid {
  316.   /*禁止选中文本*/
  317.   user-select: none;
  318.  
  319.   overflow: hidden;
  320.  
  321.   $tickDis: 40px;
  322.   $gridWidth: var(--gridWidth);
  323.   $gridHeight: var(--gridHeight);
  324.   $gridsWidth: var(--gridsWidth);
  325.   $scrollbarWidth: 14px;
  326.   width: 100%;
  327.   height: 100%;
  328.   position: relative;
  329.   .ruler-corner {
  330.     position: absolute;
  331.     z-index: 2;
  332.     left: 0;
  333.     top: 0;
  334.     width: $tickDis;
  335.     height: $tickDis;
  336.     box-sizing: border-box;
  337.     border: 1px solid #ebeef5;
  338.     border-right: none;
  339.     border-bottom: none;
  340.     background-color: #eff2f755;
  341.     /*遮罩模糊*/
  342.     backdrop-filter: blur(5px);
  343.   }
  344.   .horizontal-ruler {
  345.     position: absolute;
  346.     z-index: 1;
  347.     left: 0;
  348.     top: 0;
  349.     margin-left: $tickDis;
  350.     display: flex;
  351.     flex-wrap: nowrap;
  352.     border-top: 1px solid #ebeef5;
  353.     border-left: 1px solid #ebeef5;
  354.     /*遮罩模糊*/
  355.     backdrop-filter: blur(5px);
  356.     // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  357.     .tick {
  358.       display: flex;
  359.       justify-content: center;
  360.       align-items: center;
  361.       flex-shrink: 0;
  362.       width: $gridWidth;
  363.       height: $tickDis;
  364.       box-sizing: border-box;
  365.       border-top: 1px solid transparent;
  366.       border-left: 1px solid transparent;
  367.       border-bottom: 1px solid #ebeef5;
  368.       border-right: 1px solid #ebeef5;
  369.       font-family: DIN-Black;
  370.       background-color: #eff2f755;
  371.       &[hoverGrid] {
  372.         border-left: 1px solid #409eff;
  373.         border-right: 1px solid #409eff;
  374.         background-color: #b3d8ff99;
  375.         color: #409eff;
  376.       }
  377.     }
  378.   }
  379.   .vertical-ruler {
  380.     position: absolute;
  381.     z-index: 1;
  382.     left: 0;
  383.     top: 0;
  384.     margin-top: $tickDis;
  385.     display: flex;
  386.     flex-wrap: wrap;
  387.     flex-direction: column;
  388.     border-top: 1px solid #ebeef5;
  389.     border-left: 1px solid #ebeef5;
  390.     /*遮罩模糊*/
  391.     backdrop-filter: blur(5px);
  392.     // box-shadow: 2px 0 12px 0 rgba(0, 0, 0, 0.1);
  393.     .tick {
  394.       display: flex;
  395.       justify-content: center;
  396.       align-items: center;
  397.       flex-shrink: 0;
  398.       width: $tickDis;
  399.       height: $gridHeight;
  400.       box-sizing: border-box;
  401.       border-top: 1px solid transparent;
  402.       border-left: 1px solid transparent;
  403.       border-bottom: 1px solid #ebeef5;
  404.       border-right: 1px solid #ebeef5;
  405.       font-family: DIN-Black;
  406.       background-color: #eff2f7;
  407.       background-color: #eff2f755;
  408.       &[hoverGrid] {
  409.         border-top: 1px solid #409eff;
  410.         border-bottom: 1px solid #409eff;
  411.         background-color: #b3d8ff99;
  412.         color: #409eff;
  413.       }
  414.     }
  415.   }
  416.   .grids-scroll {
  417.     width: calc(100% - #{$tickDis});
  418.     height: calc(100vh - 310px);
  419.     box-sizing: border-box;
  420.     overflow: auto;
  421.     position: relative;
  422.     margin: $tickDis 0 0 $tickDis;
  423.     .grids {
  424.       width: calc(#{$gridsWidth} + #{$scrollbarWidth});
  425.       min-height: calc(#{$gridHeight} + #{$scrollbarWidth});
  426.       overflow: auto;
  427.       display: flex;
  428.       flex-wrap: wrap;
  429.       align-content: flex-start;
  430.       box-sizing: border-box;
  431.       border-top: 1px solid #ebeef5;
  432.       border-left: 1px solid #ebeef5;
  433.  
  434.       .grid {
  435.         display: flex;
  436.         justify-content: center;
  437.         align-items: center;
  438.         width: $gridWidth;
  439.         height: $gridHeight;
  440.         padding: 20px;
  441.         box-sizing: border-box;
  442.         border-top: 1px solid transparent;
  443.         border-left: 1px solid transparent;
  444.         border-bottom: 1px solid #ebeef5;
  445.         border-right: 1px solid #ebeef5;
  446.         word-wrap: break-word;
  447.         word-break: break-all;
  448.         white-space: break-spaces;
  449.         position: relative;
  450.  
  451.         span {
  452.           /*多行省略号*/
  453.           overflow: hidden;
  454.           word-break: break-all;
  455.           white-space: break-spaces;
  456.           display: -webkit-box;
  457.           -webkit-box-orient: vertical;
  458.           max-height: min-content;
  459.           -webkit-line-clamp: 3;
  460.           line-height: 1.2;
  461.         }
  462.         // 坐标文本
  463.         .position-text {
  464.           position: absolute;
  465.           height: 22px;
  466.           z-index: 1;
  467.           left: 0px;
  468.           top: 0px;
  469.           display: none;
  470.           flex-wrap: nowrap;
  471.           white-space: nowrap;
  472.           align-items: center;
  473.           color: white;
  474.           background-color: #00000055;
  475.           box-sizing: border-box;
  476.           padding: 0 5px;
  477.           border-radius: 0 0 8px 0;
  478.           >>> span {
  479.             font-size: 12px !important;
  480.           }
  481.           cursor: cell;
  482.           &:hover {
  483.             background-color: #409eff;
  484.             color: white;
  485.           }
  486.         }
  487.         // 删除
  488.         i.el-icon-close {
  489.           z-index: 1;
  490.           display: none;
  491.           position: absolute;
  492.           right: 0;
  493.           top: 0;
  494.           font-size: 12px !important;
  495.           justify-content: center;
  496.           align-items: center;
  497.           color: white;
  498.           background-color: #409eff;
  499.           box-sizing: border-box;
  500.           padding: 5px;
  501.           border-radius: 0 0 0 8px;
  502.           cursor: pointer;
  503.           &:hover {
  504.             background-color: #f56c6c;
  505.           }
  506.         }
  507.         // 拖拽选区
  508.         .drag-select-btn {
  509.           position: absolute;
  510.           height: 9px;
  511.           width: 9px;
  512.           z-index: 1;
  513.           right: -4.5px;
  514.           bottom: -4.5px;
  515.  
  516.           display: none;
  517.           box-sizing: border-box;
  518.           border: 2px solid white;
  519.           background-color: #f56c6c;
  520.           cursor: crosshair;
  521.         }
  522.  
  523.         &:nth-of-type(2n) {
  524.           background-color: #eff2f755;
  525.         }
  526.  
  527.         &[hoverGridX] {
  528.           border-left: 1px solid #409eff;
  529.           border-right: 1px solid #409eff;
  530.           background-color: #f2f8fe;
  531.         }
  532.         &[hoverGridY] {
  533.           border-top: 1px solid #409eff;
  534.           border-bottom: 1px solid #409eff;
  535.           background-color: #f2f8fe;
  536.         }
  537.         &[mousedownGrid] {
  538.           z-index: 2; //让drag-select-btn在顶端
  539.           border: 1px solid #f56c6c;
  540.           background-color: #f56c6c22;
  541.           .position-text {
  542.             background-color: #f56c6c66;
  543.             color: white;
  544.             &:hover {
  545.               background-color: #f56c6c;
  546.             }
  547.           }
  548.           i.el-icon-close {
  549.             background-color: #f56c6c66;
  550.             &:hover {
  551.               background-color: #f56c6c;
  552.             }
  553.           }
  554.           .drag-select-btn {
  555.             display: block;
  556.           }
  557.           &:hover:not([dragMove]) {
  558.             background-color: #f56c6c66;
  559.             i,
  560.             .position-text {
  561.               display: flex;
  562.             }
  563.           }
  564.         }
  565.         &[selected] {
  566.           z-index: 2; //让drag-select-btn在顶端
  567.           border-top: 1px solid transparent;
  568.           border-left: 1px solid transparent;
  569.           border-right: 1px solid #f56c6c22;
  570.           border-bottom: 1px solid #f56c6c22;
  571.           background-color: #f56c6c22;
  572.           .position-text {
  573.             background-color: #f56c6c66;
  574.             color: white;
  575.             &:hover {
  576.               background-color: #f56c6c;
  577.             }
  578.           }
  579.           i.el-icon-close {
  580.             background-color: #f56c6c66;
  581.             &:hover {
  582.               background-color: #f56c6c;
  583.             }
  584.           }
  585.           .drag-select-btn {
  586.             display: none;
  587.           }
  588.           &:hover:not([dragMove]) {
  589.             border: 1px solid #f56c6c;
  590.             background-color: #f56c6c66 !important;
  591.           }
  592.         }
  593.         &[selected-left] {
  594.           border-left: 1px solid #f56c6c;
  595.         }
  596.         &[selected-top] {
  597.           border-top: 1px solid #f56c6c;
  598.         }
  599.         &[selected-right] {
  600.           border-right: 1px solid #f56c6c;
  601.         }
  602.         &[selected-bottom] {
  603.           border-bottom: 1px solid #f56c6c;
  604.         }
  605.         &[selected-right][selected-bottom] {
  606.           .drag-select-btn {
  607.             display: block;
  608.           }
  609.         }
  610.         &[mousedownGridX] {
  611.           border-left: 1px solid #f56c6c;
  612.           border-right: 1px solid #f56c6c;
  613.           background-color: #f56c6c22;
  614.         }
  615.         &[mousedownGridY] {
  616.           border-top: 1px solid #f56c6c;
  617.           border-bottom: 1px solid #f56c6c;
  618.           background-color: #f56c6c22;
  619.         }
  620.         &[dragMove] {
  621.         }
  622.         &:hover:not([mousedownGrid]):not([dragMove]) {
  623.           background-color: #b3d8ff99;
  624.           i,
  625.           .position-text {
  626.             display: flex;
  627.           }
  628.         }
  629.       }
  630.       &[selectedGrids] {
  631.         .grid {
  632.           &:hover:not([mousedownGrid]):not([dragMove]):not([selected]) {
  633.             border: 1px solid #409eff;
  634.           }
  635.         }
  636.       }
  637.     }
  638.   }
  639. }
  640. </style>

应用

  1. <template>
  2.   <sgExcelGrid
  3.     :props="{ label: `MC` }"
  4.     :data="gridDatas"
  5.     :pageSize="pageSize"
  6.     @del="delGrid"
  7.     @selectedDatas="selectedDatas"
  8.   />
  9. </template>
  10. <script>
  11. import sgExcelGrid from "@/vue/components/admin/sgExcelGrid";
  12. export default {
  13.   components: {
  14.     sgExcelGrid,
  15.   },
  16.   data() {
  17.     return {
  18.       gridDatas: [
  19.         { ID: 1, value: 1, MC: "显示文本1" },
  20.         { ID: 2, value: 2, MC: "显示文本2" },
  21.         { ID: 3, value: 3, MC: "显示文本3" },
  22.         { ID: 4, value: 4, MC: "显示文本4" },
  23.         { ID: 5, value: 5, MC: "显示文本5" },
  24.       ],
  25.       pageSize: 100, //每页显示多少个单元格
  26.       rectSelectIDS: [], //选中的ID数组
  27.     };
  28.   },
  29.   props: ["value"],
  30.   computed: {},
  31.   watch: {},
  32.   created() {},
  33.   mounted() {},
  34.   destroyed() {},
  35.   methods: {
  36.     selectedDatas(d) {
  37.       this.rectSelectIDS = d.map((v) => v.ID); //获取选中项ID数组
  38.     },
  39.     delGrid(d) {
  40.       //删除单元格
  41.     },
  42.   },
  43. };
  44. </script>

基于【sgDragMoveTile】自定义组件：拖拽瓦片图、地图、大图，滚动条对应同步滚动_用鼠标拖拽(drag)内容div”,滚动条对应同步滚动 vue-CSDN博客文章浏览阅读140次。【代码】【sgDragMoveTile】自定义组件：拖拽瓦片图、地图、大图，滚动条对应同步滚动。_用鼠标拖拽(drag)内容div”,滚动条对应同步滚动 vuehttps://blog.csdn.net/qq_37860634/article/details/133292981

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

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

  

闽ICP备14008679号