vxe-table?實現(xiàn)?excel?選擇一個單元格拖拽自動復制新的單元格(示例代碼)

更新時間：2025年01月21日 09:49:34 作者：可不簡單

vxe-table是一款強大的表格組件,支持Excel風格的操作,通過鼠標右下角的擴展按鈕,用戶可以拖拽選擇單元格并自動復制內(nèi)容到擴展區(qū)域的所有單元格中,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧

vxe-table 實現(xiàn) excel 選擇一個單元格，拖拽自動復制新的單元格

鼠標按住右下角擴展按鈕，當選取一個單元格時，自動將當前內(nèi)容填充到擴展區(qū)域的所有單元格中

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>
<script>
export default {
  data () {
    const gridOptions = {
      border: true,
      height: 500,
      showOverflow: true,
      columnConfig: {
        resizable: true
      },
      editConfig: {
        mode: 'cell',
        trigger: 'dblclick' // 雙擊單元格激活編輯狀態(tài)
      },
      mouseConfig: {
        area: true,
        extension: true // 是否開啟區(qū)域擴展選取功能，開啟后可以通過鼠標左鍵按住區(qū)域內(nèi)右下角擴展按鈕，將區(qū)域橫向或縱向擴大
      },
      areaConfig: {
        extendByCopy: true // 是否啟用擴展區(qū)域自動填充，當選取一個單元格時，自動將當前內(nèi)容填充到擴展區(qū)域的所有單元格中（同時按住 ctrl 鍵可取消值自動識別數(shù)字功能）
      },
      keyboardConfig: {
        arrowCursorLock: true,
        isClip: true,
        isArrow: true,
        isShift: true,
        isTab: true,
        isEnter: true,
        isEdit: true,
        isDel: true,
        isEsc: true,
        isFNR: true // 是否開啟查找與替換
      },
      columns: [
        { type: 'seq', width: 60 },
        { field: 'a', title: 'A', editRender: { name: 'input' } },
        { field: 'b', title: 'B', editRender: { name: 'input' } },
        { field: 'c', title: 'C', editRender: { name: 'input' } },
        { field: 'd', title: 'D', editRender: { name: 'input' } },
        { field: 'e', title: 'E', editRender: { name: 'input' } },
        { field: 'f', title: 'F', editRender: { name: 'input' } },
        { field: 'g', title: 'G', editRender: { name: 'input' } },
        { field: 'h', title: 'H', editRender: { name: 'input' } }
      ],
      data: [
        { id: 10001, a: 'Test1', b: 'Develop', c: 'Man', d: '23', e: '28', f: '', g: '', h: '' },
        { id: 10002, a: 'Test2', b: 'Test', c: 'Women', d: '23', e: '22', f: '', g: '', h: '' },
        { id: 10003, a: 'Test3', b: 'PM', c: 'Man', d: '23', e: '32', f: '', g: '', h: '' },
        { id: 10004, a: 'Test4', b: 'Designer', c: 'Women', d: '456', e: '24', f: '', g: '', h: '' },
        { id: 10005, a: 'Test5', b: 'Designer', c: 'Women', d: '23', e: '42', f: '', g: '', h: '' },
        { id: 10006, a: 'Test6', b: 'Designer', c: 'Man', d: '23', e: '38', f: '', g: '', h: '' },
        { id: 10007, a: 'Test7', b: 'Test', c: 'Women', d: '100', e: '24', f: '', g: '', h: '' },
        { id: 10008, a: 'Test8', b: 'PM', c: 'Man', d: '345', e: '34', f: '', g: '', h: '' },
        { id: 10009, a: 'Test9', b: 'Designer', c: 'Man', d: '67', e: '52', f: '', g: '', h: '' },
        { id: 10010, a: 'Test10', b: 'Test', c: 'Women', d: '23', e: '44', f: '', g: '', h: '' }
      ]
    }
    return {
      gridOptions
    }
  }
}
</script>

https://gitee.com/x-extends/vxe-table

到此這篇關于vxe-table 實現(xiàn) excel 選擇一個單元格，拖拽自動復制新的單元格的文章就介紹到這了,更多相關vxe-table 拖拽復制單元格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: