乐趣区

关于vue.js:vxetable-pro-鼠标单元格区域选取多重区域选取复制粘贴查找替换等功能

jiezi

vxe-table pro 鼠标单元格区域选取、多重区域选取、复制粘贴、查找替换 … 等性能

1. 鼠标区域抉择性能：

参数阐明：

mouse-config.area 是否开启鼠标单元格区域选取 

<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. 鼠标多重区域选取、延长扩充区域

参数阐明：

mouse-config.extension 是否开启鼠标点击区域内右下角延长按钮（注：延长扩充区域并非复制性能，和 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. 固定列区域选取 

<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. 复制、剪贴、粘贴

参数阐明：

keyboard-config.isClip 是否开启（Ctrl+ X 键、Ctrl+ C 键、Ctrl+ V 键）复制粘贴性能 

<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. 合并、勾销合并

参数阐明：

keyboard-config.isMerge 是否开开启（Ctrl+ M 键）合并和勾销合并性能 

<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>

6. 查找和替换

参数阐明：

keyboard-config.isFNR 是否开启（Ctrl+ F 键、Ctrl+ H 键）查找和替换性能 

<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. 更多实用的快捷键

参数阐明：

keyboard-config.isEdit 是否开启（Esc 键、F2 键、任意键）单元格编辑性能
keyboard-config.isTab 是否开启（Tab 键、Shift+Tab 键）单元格左右挪动性能
keyboard-config.isArrow 是否开启（方向键）单元格上下左右挪动性能
keyboard-config.isEnter 是否开启（Enter 键、Shift+Enter 键）单元格高低挪动性能
keyboard-config.isDel 是否开启（Delete 键、Backspace 键）清空单元格的值
keyboard-config.isChecked 是否开启（Spacebar 键）切换复选框和单选框状态
keyboard-config.enterToTab 是否将回车键行为改成 Tab 键行为

  • 鼠标：

    • （Mouse + Left）鼠标选取指定范畴的单元格
    • （Mouse + Right）鼠标选取选中地位的单元格
    • （Mouse + Left + Ctrl）鼠标选取多区域的单元格
    • （Mouse + Left）鼠标左键按住区域内右下角延长按钮，将区域横向或纵向扩充

  • 键盘：

    • （Ctrl + X）将单元格标记为剪贴状态并将内容复制到剪贴板，反对 Excel 和 WPS
    • （Ctrl + C）将单元格标记为复制状态并将内容复制到剪贴板，反对 Excel 和 WPS
    • （Ctrl + V）将剪贴板的内容粘贴到指定区域中，反对 Excel 和 WPS
    • （Ctrl + M）将选取的单元格合并或勾销合并
    • （Ctrl + F）查找单元格数据，全表或查找指定区域单元格数据
    • （Ctrl + H）替换单元格数据，全表或替换指定区域单元格数据
    • （Arrow Up ↑）如果存在，则挪动到下面的单元格
    • （Arrow Down ↓）如果存在，则挪动到上面的单元格
    • （Arrow Left ←）如果存在，则挪动到右边的单元格
    • （Arrow Right →）如果存在，则挪动到左边的单元格
    • （Tab）如果存在，则挪动到左边单元格；如果存在区域，则在指定区域内挪动；如果挪动到最初一列，则从下一行开始移到，以此循环
    • （Shift + Tab）如果存在，则挪动到右边单元格，则在指定区域内挪动；如果挪动到第一列，则从上一行开始移到，以此循环
    • （Spacebar）如果选取的区域存在复选框，则切换勾选状态
    • （Enter）如果存在，勾销单元格编辑并挪动到上面的单元格，则在指定区域内挪动；如果挪动到最初一行，则从下一列开始移到，以此循环
    • （Shift + Enter）如果存在，勾销单元格编辑并挪动到下面的单元格，则在指定区域内挪动；如果挪动到第一行，则从上一列开始移到，以此循环
    • （Delete）清空单元格内容
    • （Backspace）清空单元格内容并激活为编辑状态
    • （F2）如果存在，激活单元格为编辑状态
    • （Esc）如果存在，勾销单元格编辑状态
    • （*）按下除功能键之外的任意键激活笼罩式单元格编辑 
<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. 更多实用的快捷菜单


具体参数及应用：vxe-table-plugin-menus

9. 集成 echarts 图表渲染


具体参数及应用：vxe-table-plugin-charts

退出移动版