快捷導(dǎo)航

vxe-table?實(shí)現(xiàn)?excel?選擇一個(gè)單元格拖拽自動(dòng)復(fù)制新的單元格(示例代碼)

更新時(shí)間：2025年01月21日 09:49:34 作者：可不簡(jiǎn)單

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

vxe-table 實(shí)現(xiàn) excel 選擇一個(gè)單元格，拖拽自動(dòng)復(fù)制新的單元格

官網(wǎng)：https://vxetable.cn

鼠標(biāo)按住右下角擴(kuò)展按鈕，當(dāng)選取一個(gè)單元格時(shí)，自動(dòng)將當(dāng)前內(nèi)容填充到擴(kuò)展區(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ū)域擴(kuò)展選取功能，開啟后可以通過鼠標(biāo)左鍵按住區(qū)域內(nèi)右下角擴(kuò)展按鈕，將區(qū)域橫向或縱向擴(kuò)大
      },
      areaConfig: {
        extendByCopy: true // 是否啟用擴(kuò)展區(qū)域自動(dòng)填充，當(dāng)選取一個(gè)單元格時(shí)，自動(dòng)將當(dāng)前內(nèi)容填充到擴(kuò)展區(qū)域的所有單元格中（同時(shí)按住 ctrl 鍵可取消值自動(dòng)識(shí)別數(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

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

您可能感興趣的文章: