143 lines
4.3 KiB
Vue
143 lines
4.3 KiB
Vue
<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-4-30 14:52: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> |