Basic use of VXE-Table Pro (Note: Pro plug-in is not an open source project, only for partial preview)

A powerful open source version can be found here: VXE-Table

1. Mouse area selection function:

Parameter description:

Whether mouse-config.area enables selection of mouse cell areas

<template>
  <div>
    <vxe-table
    :mouse-config="{area: true}"
    :data="tableData">
      <vxe-table-column field="a" title="A"></vxe-table-column>
      <vxe-table-column field="b" title="B"></vxe-table-column>
      <vxe-table-column field="c" title="C"></vxe-table-column>
      <vxe-table-column field="d" title="D"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { a: 'a1', b: 'b1', c: 'c1', d: 'd1' },
        { a: 'a2', b: 'b2', c: 'c2', d: 'd2' },
        { a: 'a3', b: 'b3', c: 'c3', d: 'd3' },
      ]
    }
  }
}
</script>

2. Multiple mouse regions are selected and extended to expand the region

Parameter description:

Whether or not to enable mouse-config.extension by clicking the extension button in the lower right corner of the extension area (Note: extension extension is not a copy function and does not act like Excel)

<template>
  <div>
    <vxe-table
    :mouse-config="{area: true, extension: true}"
    :data="tableData">
      <vxe-table-column field="a" title="A"></vxe-table-column>
      <vxe-table-column field="b" title="B"></vxe-table-column>
      <vxe-table-column field="c" title="C"></vxe-table-column>
      <vxe-table-column field="d" title="D"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { a: 'a1', b: 'b1', c: 'c1', d: 'd1' },
        { a: 'a2', b: 'b2', c: 'c2', d: 'd2' },
        { a: 'a3', b: 'b3', c: 'c3', d: 'd3' },
      ]
    }
  }
}
</script>

3. Fixed column area selection

<template>
  <div>
    <vxe-table
    :mouse-config="{area: true, extension: true}"
    :data="tableData">
      <vxe-table-column field="a" title="A" fixed="left"></vxe-table-column>
      <vxe-table-column field="b" title="B"></vxe-table-column>
      <vxe-table-column field="c" title="C"></vxe-table-column>
      <vxe-table-column field="d" title="D" fixed="right"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { a: 'a1', b: 'b1', c: 'c1', d: 'd1' },
        { a: 'a2', b: 'b2', c: 'c2', d: 'd2' },
        { a: 'a3', b: 'b3', c: 'c3', d: 'd3' },
      ]
    }
  }
}
</script>

4. Copy, cut and paste

Parameter description:

Keyboard-config. Is isClip enabled (Ctrl+X, Ctrl+C, Ctrl+V) copy and paste function

Clip-config.isCopy clip-config.isCut clip-config.isPaste clip-config.isPaste clip-config.isRowIncrement clip-config.isRowIncrement CLIP -CONFIG. ISColumnIncrement Enable ColumnIncrement When the number of columns pasted exceeds the number of columns in the table, insert new columns automatically

<template>
  <div>
    <vxe-grid
    :mouse-config="{area: true, extension: true}"
    :keyboard-config="{isClip: true}"
    :columns="tableColumn"
    :data="tableData">
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableColumn: [
        { field: 'a', title: 'A' },
        { field: 'b', title: 'B' },
        { field: 'c', title: 'C' },
        { field: 'd', title: 'D' }
      ],
      tableData: [
        { a: 'a1', b: 'b1', c: 'c1', d: 'd1' },
        { a: 'a2', b: 'b2', c: 'c2', d: 'd2' },
        { a: 'a3', b: 'b3', c: 'c3', d: 'd3' },
      ]
    }
  }
}
</script>

5. Merge, unmerge

Parameter description:

Keyboard-config.isMerge Whether to turn on (Ctrl+M) merge and unmerge

<template>
  <div>
    <vxe-grid
    :mouse-config="{area: true, extension: true}"
    :keyboard-config="{isMerge: true}"
    :columns="tableColumn"
    :data="tableData">
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableColumn: [
        { field: 'a', title: 'A' },
        { field: 'b', title: 'B' },
        { field: 'c', title: 'C' },
        { field: 'd', title: 'D' }
      ],
      tableData: [
        { a: 'a1', b: 'b1', c: 'c1', d: 'd1' },
        { a: 'a2', b: 'b2', c: 'c2', d: 'd2' },
        { a: 'a3', b: 'b3', c: 'c3', d: 'd3' },
      ]
    }
  }
}
</script>

Find and replace

Parameter description:

Keyboard-config. isFNR whether to enable (Ctrl+F, Ctrl+H) search and replace function

<template>
  <div>
    <vxe-grid
    :mouse-config="{area: true, extension: true}"
    :keyboard-config="{isFNR: true}"
    :columns="tableColumn"
    :data="tableData">
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableColumn: [
        { field: 'a', title: 'A' },
        { field: 'b', title: 'B' },
        { field: 'c', title: 'C' },
        { field: 'd', title: 'D' }
      ],
      tableData: [
        { a: 'a1', b: 'b1', c: 'c1', d: 'd1' },
        { a: 'a2', b: 'b2', c: 'c2', d: 'd2' },
        { a: 'a3', b: 'b3', c: 'c3', d: 'd3' },
      ]
    }
  }
}
</script>

7. More useful keyboard shortcuts

Parameter description:

Whether the rid_device_info_keyboard – config. IsEdit open (Esc, F2, any key) cell editing the rid_device_info_keyboard – config. IsTab whether open (Tab, Shift + Tab) cell moving function Whether the rid_device_info_keyboard – config. IsArrow open (direction) cell function from top to bottom and move around the rid_device_info_keyboard – config. IsEnter whether open (Enter, Shift + Enter) move up and down the cell function Keyboard-config. isDel Is On (Delete, Backspace) Clear cell values Keyboard-config. isChecked Is On (SpaceBar) Toggle checkbox and checkbox states Whether the rid_device_info_keyboard – config. IsMerge open open (Ctrl + M) and cancel the combining function of the rid_device_info_keyboard – config. IsFNR whether open (Ctrl + F key, Ctrl + H key) find and replace function Keyboard-config.entertotab Whether to change carriage return behavior to Tab behavior

  • Mouse:

    • (Mouseleft) Mouse selects the cell of the specified range
    • Mouseright Mouse to select the cell in the selected position
    • (Ctrl + Mouseleft) Select a multi-region cell with the mouse
    • (Shift + Mouseleft) Click the area between the active cell and the selected cell
    • Hold down the extension button in the lower right corner of the area with the left mouse button to enlarge the area horizontally or vertically

  • Keyboard:

    • (Ctrl + X) marks the cell as clipped and copies the contents to the clipboard, Excel and WPS support
    • (Ctrl + C) marks the cell as copied and copies the contents to the clipboard, Excel and WPS support
    • (Ctrl + V) Paste the contents of the clipboard into the specified area, Excel and WPS support
    • (Ctrl + M) Merges or unmerges the selected cells
    • (CTRL + F) Finds cell data, entire table, or the specified range cell data
    • (Ctrl + H) Replace cell data, the entire table or the specified region cell data
    • (Arrow Up ↑) If present, move to the cell above
    • (Arrow Down ↓) If present, move to the cell below
    • (Arrow Left ←) If present, move to the Left cell
    • (Arrow Right →) If present, move to the Right cell
    • (Tab) If present, move to the right cell; If there is a region, move within the specified region; If you move to the last column, you move from the next row to the next, and so on
    • (Shift + Tab) If present, move to the left cell, move within the specified area; If you move to the first column, you move from the previous row to, and so on
    • (Spacebar) Toggles the checkbox state if there is a check box in the selected area
    • If it exists, cancel cell editing and move to the cell below, then move in the specified area; If you move to the last row, you move from the next column to the next, and so on
    • (Shift + Enter) If present, cancel cell editing and move to the above cell, move in the specified area; If you move to the first row, you move from the previous column to, and so on
    • (DELETE) Clears the cell contents
    • Clears the cell contents and activates the edit state
    • (F2) Activate the cell to edit state if it exists
    • (ESC) If present, unedit the cell state
    • (*) Press any key except the function key to activate overlay cell editing
<template>
  <div>
    <vxe-grid
    :mouse-config="{area: true, extension: true}"
    :keyboard-config="{isClip: true, isEdit: true, isTab: true, isArrow: true, isEnter: true, isDel: true, isMerge: true, isFNR: true, isChecked: true, enterToTab: false}"
    :columns="tableColumn"
    :data="tableData">
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableColumn: [
        { field: 'a', title: 'A' },
        { field: 'b', title: 'B' },
        { field: 'c', title: 'C' },
        { field: 'd', title: 'D' }
      ],
      tableData: [
        { a: 'a1', b: 'b1', c: 'c1', d: 'd1' },
        { a: 'a2', b: 'b2', c: 'c2', d: 'd2' },
        { a: 'a3', b: 'b3', c: 'c3', d: 'd3' },
      ]
    }
  }
}
</script>

8. More practical shortcut menus



Specific parameters and use:vxe-table-plugin-menus

9. Integrated Echarts chart rendering



Specific parameters and use:vxe-table-plugin-charts

(Note: Pro plugin is not open source project, only for partial preview)