1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| <template>
| <div>
| <b>键盘操作快捷键：</b>
| <div style="border: 1px solid #cccccc; padding: 8px; width: 740px">
| <pre>
| F2 | 如果存在，激活单元格为编辑状态
| Esc | 如果存在，取消单元格编辑状态
| ↑ | 如果存在，则移动到上面的单元格
| ↓ | 如果存在，则移动到下面的单元格
| ← | 如果存在，则移动到左边的单元格
| → | 如果存在，则移动到右边的单元格
| Tab | 如果存在，则移动到右边单元格；如果移动到最后一列，则从下一行开始移到，以此循环
| Shift + Tab | 如果存在，则移动到左边单元格，如果移动到第一列，则从上一行开始移到，以此循环
| Enter | 如果存在，取消单元格编辑并移动到下面的单元格
| Shift + Enter | 如果存在，取消单元格编辑并移动到上面的单元格</pre
| >
| </div>
|
| <JVxeTable ref="tableRef" stripe toolbar rowNumber rowSelection keyboardEdit :columns="columns" :dataSource="dataSource"> </JVxeTable>
| </div>
| </template>
| <script lang="ts">
| import { ref, onMounted, nextTick, defineComponent } from 'vue';
| import { Popconfirm } from 'ant-design-vue';
| import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
|
| export default defineComponent({
| name: 'JVxeDemo5',
| components: { [Popconfirm.name]: Popconfirm },
| setup() {
| const tableRef = ref<JVxeTableInstance>();
| const columns = ref<JVxeColumn[]>([
| {
| title: '单行文本',
| key: 'input',
| type: JVxeTypes.input,
| width: 220,
| defaultValue: '',
| placeholder: '请输入${title}',
| },
| {
| title: '多行文本',
| key: 'textarea',
| type: JVxeTypes.textarea,
| width: 240,
| },
| {
| title: '数字',
| key: 'number',
| type: JVxeTypes.inputNumber,
| width: 120,
| defaultValue: 32,
| },
| {
| title: '日期时间',
| key: 'datetime',
| type: JVxeTypes.datetime,
| width: 240,
| defaultValue: '2019-04-30 14:51:22',
| placeholder: '请选择',
| },
| {
| title: '时间',
| key: 'time',
| type: JVxeTypes.time,
| width: 220,
| defaultValue: '14:52:22',
| placeholder: '请选择',
| },
| {
| title: '下拉框',
| key: 'select',
| type: JVxeTypes.select,
| width: 220,
| // 下拉选项
| options: [
| { title: 'String', value: 'string' },
| { title: 'Integer', value: 'int' },
| { title: 'Double', value: 'double' },
| { title: 'Boolean', value: 'boolean' },
| ],
| // allowInput: true,
| allowSearch: true,
| placeholder: '请选择',
| },
| {
| title: '复选框',
| key: 'checkbox',
| type: JVxeTypes.checkbox,
| // width: 100,
| customValue: ['Y', 'N'], // true ,false
| defaultChecked: false,
| },
| ]);
| const dataSource = ref([]);
|
| function handleView(props) {
| // 参数介绍：
| // props.value 当前单元格的值
| // props.row 当前行的数据
| // props.rowId 当前行ID
| // props.rowIndex 当前行下标
| // props.column 当前列的配置
| // props.columnIndex 当前列下标
| // props.$table vxe-table实例，可以调用vxe-table内置方法
| // props.scrolling 是否正在滚动
| // props.reloadEffect 是否开启了数据刷新特效
| // props.triggerChange 触发change事件，用于更改slot的值
| console.log('props: ', props);
| }
|
| function handleDelete({ row }) {
| // 使用实例：删除当前操作的行
| tableRef.value?.removeRows(row);
| }
|
| onMounted(async () => {
| console.log(tableRef.value);
| await nextTick();
| // 默认添加五行数据
| tableRef.value!.addRows([{ input: 'input_1' }, { input: 'input_2' }, { input: 'input_3' }, { input: 'input_4' }, { input: 'input_5' }], {
| setActive: false,
| });
| });
|
| return { tableRef, columns, dataSource, handleView, handleDelete };
| },
| });
| </script>
|
|
