关于vxe-table的使用心得及扩展3【vxe-table二次封装组件应用】(非插件)
文章目录
- 概要
-
-
-
- 1. 本节主要是再次对已封装的组件进行运用示范。
- 2. 补充了表格高度会根据窗口自适应填满的功能
- 3. 补充了鼠标拖拽范围选取功能，可根据拖拽范围进行粘贴剪贴板中的数据到表格中。支持ctrl+v，excel的数据或任意单文本
- 4. 补充了以鼠标选中单元格为起始点进行数据赋值的功能。支持ctrl+v
-
-
- 示例动图
- 一、组件应用
- 二、注册拖拽选取事件
-
- 1.注册单元格 鼠标拖拽范围选取功能
- 2.以鼠标选中单元格为起始点进行数据赋值
- 三、功能代码说明
-
- 1.表格组件代码更新
- 2. tablebodyheight.js
- 3. selection-area.js
- 4. 单元格选中样式及拖拽范围样式
- 插件版本说明
- 链接指引
概要
1. 本节主要是再次对已封装的组件进行运用示范。
2. 补充了表格高度会根据窗口自适应填满的功能
3. 补充了鼠标拖拽范围选取功能，可根据拖拽范围进行粘贴剪贴板中的数据到表格中。支持ctrl+v，excel的数据或任意单文本
4. 补充了以鼠标选中单元格为起始点进行数据赋值的功能。支持ctrl+v
示例动图
1.以单元格为起点进行粘贴剪贴板数据
2.鼠标拖拽选取范围，对框选的单元格进行粘贴剪贴板数据
双表格鼠标框选赋值互不影响
一、组件应用
<template>
<div>
<!-- 筛选表单 -->
<div class="search-group">
<vxe-input
size="small"
placeholder="搜索"></vxe-input>
</div>
<!-- 表格上方按钮组 -->
<div class="list-button-area">
<vxe-toolbar>
<template #buttons>
<vxe-button @click="Enable()">启用禁用标拖拽选取</vxe-button>
</template>
</vxe-toolbar>
</div>
<custom-vxe-table
ref="xTable"
:dynamicHeight="600"
startActivatedPaste
:checkboxConfig="{
range: true
}"
showFooter
:summaryColKeyList="[
['num1', 'rate'],
['age', 'rate'],
]"
:sumConfig="[
{ columnIndex: 1, text: '合计(元)' },
{ columnIndex: 1, text: '平均值(元)', ruleName: 'avg' },
]"
:table-data="tableData">
<vxe-column
type="checkbox"
width="60"></vxe-column>
<vxe-column
type="seq"
width="150"></vxe-column>
<vxe-column
field="name"
title="name"
:edit-render="{ name: 'VxeInput' }"></vxe-column>
<vxe-column
field="num1"
title="num1"
:edit-render="{ autofocus: '.vxe-input--inner' }">
<template #edit="{ row }">
<vxe-input
v-model="row.num1"
type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column
field="age"
:edit-render="{}">
<template #edit="{ row }">
<vxe-input
v-model="row.num1"
type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column
field="rate"
title="rate"></vxe-column>
</custom-vxe-table>
<el-divider>分割线</el-divider>
<custom-vxe-table
ref="xTable2"
:dynamicHeight="600"
showFooter
:summaryColKeyList="[
['num1', 'rate'],
['age', 'rate'],
]"
:sumConfig="[
{ columnIndex: 1, text: '合计(元)' },
{ columnIndex: 1, text: '平均值(元)', ruleName: 'avg' },
]"
:table-data="tableData2">
<vxe-column
type="checkbox"
width="60"></vxe-column>
<vxe-column
type="seq"
width="150"></vxe-column>
<vxe-column
field="name"
title="name"
:edit-render="{ name: 'VxeInput' }"></vxe-column>
<vxe-column
field="num1"
title="num1"
:edit-render="{}">
<template #edit="{ row }">
<vxe-input
v-model="row.num1"
type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column
field="age"
title="age"></vxe-column>
<vxe-column
field="rate"
title="rate"></vxe-column>
</custom-vxe-table>
</div>
</template>
<script>
import CustomVxeTable from '../components/custom-vxe-table'
// name > components > mixins > props > data > computed > watch > filter
export default {
name: 'demo-1', //
components: {
CustomVxeTable },
data() {
return {
tableData: [
{
id: 10001,
name: 'Test1',
nickname: 'T1',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 40,
age: 28.2,
rate: 22,
},
{
id: 10002,
name: 'Test2',
nickname: 'T2',
role: 'Designer',
sex: '1',
sex2: ['0', '1'],
num1: 23,
age: 22.1,
rate: 34,
},
{
id: 10003,
name: 'Test3',
nickname: 'T3',
role: 'Test',
sex: '0',
sex2: ['1'],
num1: 200,
age: 32.1,
rate: 18,
},
{
id: 10004,
name: 'Test4',
nickname: 'T4',
role: 'Designer',
sex: '1',
sex2: ['1'],
num1: 30,
age: 23.3,
rate: 13,
},
{
id: 10005,
name: 'Test5',
nickname: 'T5',
role: 'Develop',
sex: '0',
sex2: ['1', '0'],
num1: 20,
age: 30.01,
rate: 6,
},
{
id: 10006,
name: 'Test6',
nickname: 'T6',
role: 'Designer',
sex: '1',
sex2: ['0'],
num1: 10,
age: 21.03,
rate: 33,
},
{
id: 10007,
name: 'Test7',
nickname: 'T7',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 5,
age: 29,
rate: 4,
},
{
id: 10008,
name: 'Test8',
nickname: 'T8',
role: 'PM',
sex: '1',
sex2: ['0'],
num1: 2,
age: 35,
rate: 55,
},
{
id: 10009,
name: 'Test9',
nickname: 'T9',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 40,
age: 28.2,
rate: 22,
},
{
id: 10010,
name: 'Test10',
nickname: 'T10',
role: 'Designer',
sex: '1',
sex2: ['0', '1'],
num1: 23,
age: 22.1,
rate: 34,
},
{
id: 10011,
name: 'Test11',
nickname: 'T11',
role: 'Test',
sex: '0',
sex2: ['1'],
num1: 200,
age: 32.1,
rate: 18,
},
{
id: 10012,
name: 'Test12',
nickname: 'T12',
role: 'Designer',
sex: '1',
sex2: ['0', '1'],
num1: 23,
age: 22.1,
rate: 34,
},
{
id: 10013,
name: 'Test13',
nickname: 'T13',
role: 'Test',
sex: '0',
sex2: ['1'],
num1: 200,
age: 32.1,
rate: 18,
},
{
id: 100014,
name: 'Test14',
nickname: 'T14',
role: 'Designer',
sex: '1',
sex2: ['1'],
num1: 30,
age: 23.3,
rate: 13,
},
{
id: 100015,
name: 'Test15',
nickname: 'T15',
role: 'Develop',
sex: '0',
sex2: ['1', '0'],
num1: 20,
age: 30.01,
rate: 6,
},
{
id: 100016,
name: 'Test16',
nickname: 'T16',
role: 'Designer',
sex: '1',
sex2: ['0'],
num1: 10,
age: 21.03,
rate: 33,
},
{
id: 100017,
name: 'Test17',
nickname: 'T17',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 5,
age: 29,
rate: 4,
},
{
id: 100018,
name: 'Test18',
nickname: 'T18',
role: 'PM',
sex: '1',
sex2: ['0'],
num1: 2,
age: 35,
rate: 55,
},
],
tableData2: [
{
id: 10001,
name: 'Test1',
nickname: 'T1',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 40,
age: 28.2,
rate: 22,
},
{
id: 10002,
name: 'Test2',
nickname: 'T2',
role: 'Designer',
sex: '1',
sex2: ['0', '1'],
num1: 23,
age: 22.1,
rate: 34,
},
{
id: 10003,
name: 'Test3',
nickname: 'T3',
role: 'Test',
sex: '0',
sex2: ['1'],
num1: 200,
age: 32.1,
rate: 18,
},
{
id: 10004,
name: 'Test4',
nickname: 'T4',
role: 'Designer',
sex: '1',
sex2: ['1'],
num1: 30,
age: 23.3,
rate: 13,
},
{
id: 10005,
name: 'Test5',
nickname: 'T5',
role: 'Develop',
sex: '0',
sex2: ['1', '0'],
num1: 20,
age: 30.01,
rate: 6,
},
{
id: 10006,
name: 'Test6',
nickname: 'T6',
role: 'Designer',
sex: '1',
sex2: ['0'],
num1: 10,
age: 21.03,
rate: 33,
},
{
id: 10007,
name: 'Test7',
nickname: 'T7',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 5,
age: 29,
rate: 4,
},
{
id: 10008,
name: 'Test8',
nickname: 'T8',
role: 'PM',
sex: '1',
sex2: ['0'],
num1: 2,
age: 35,
rate: 55,
},
{
id: 10009,
name: 'Test9',
nickname: 'T9',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 40,
age: 28.2,
rate: 22,
},
{
id: 10010,
name: 'Test10',
nickname: 'T10',
role: 'Designer',
sex: '1',
sex2: ['0', '1'],
num1: 23,
age: 22.1,
rate: 34,
},
{
id: 10011,
name: 'Test11',
nickname: 'T11',
role: 'Test',
sex: '0',
sex2: ['1'],
num1: 200,
age: 32.1,
rate: 18,
},
{
id: 10012,
name: 'Test12',
nickname: 'T12',
role: 'Designer',
sex: '1',
sex2: ['0', '1'],
num1: 23,
age: 22.1,
rate: 34,
},
{
id: 10013,
name: 'Test13',
nickname: 'T13',
role: 'Test',
sex: '0',
sex2: ['1'],
num1: 200,
age: 32.1,
rate: 18,
},
{
id: 100014,
name: 'Test14',
nickname: 'T14',
role: 'Designer',
sex: '1',
sex2: ['1'],
num1: 30,
age: 23.3,
rate: 13,
},
{
id: 100015,
name: 'Test15',
nickname: 'T15',
role: 'Develop',
sex: '0',
sex2: ['1', '0'],
num1: 20,
age: 30.01,
rate: 6,
},
{
id: 100016,
name: 'Test16',
nickname: 'T16',
role: 'Designer',
sex: '1',
sex2: ['0'],
num1: 10,
age: 21.03,
rate: 33,
},
{
id: 100017,
name: 'Test17',
nickname: 'T17',
role: 'Develop',
sex: '0',
sex2: ['0'],
num1: 5,
age: 29,
rate: 4,
},
{
id: 100018,
name: 'Test18',
nickname: 'T18',
role: 'PM',
sex: '1',
sex2: ['0'],
num1: 2,
age: 35,
rate: 55,
},
],
}
},
mounted() {
// 注册单元格 鼠标拖拽范围选取功能
this.$refs.xTable.selectCell({
dom: this.$refs.xTable })
// this.$refs.xTable2.selectCell({
dom: this.$refs.xTable2 })
},
methods:{
Enable(){
this.$refs.xTable.selectCellToggle()
// this.$refs.xTable2.selectCellToggle()
}
}
}
</script>
二、注册拖拽选取事件
1.注册单元格 鼠标拖拽范围选取功能
// dom: 框选识别的范围
selectCell({
dom: this.$refs.xTable })
2.以鼠标选中单元格为起始点进行数据赋值
组件上开启 startActivatedPaste 参数
上面双表格例子中，第一个表格开启了这个参数，第二个没有开启。所以第一个表格支持选中单元格直接粘贴数据
三、功能代码说明
1.表格组件代码更新
src\components\custom-vxe-table\index.vue
<template>
<div class="table-box">
<vxe-table
ref="vxetablem"
v-on="$listeners"
v-bind="$attrs"
:loading="loading"
:loading-config="loadingOpts"
:auto-resize="autoResize"
:stripe="stripe"
:align="align"
:header-align="headerAlign"
:merge-cells="mergeCells"
:tree-config="treeOpts"
:radio-config="radioOpts"
:checkbox-config="checkboxOpts"
:show-overflow="showOverflow"
:show-header-overflow="showHeaderOverflow"
:show-footer-overflow="showFooterOverflow"
:keep-source="keepSource"
:border="border"
:height="height"
:min-height="minHeight"
:max-