<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" v-slot="scord" label="Date" width="180">
<input @keydown="keyMove(scord,$event)" type="text"
:ref='`tableData${scord.column.property}${scord.$index}_ref`'
v-model="tableData[scord.$index][scord.column.property]">
</el-table-column>
<el-table-column prop="name" label="Name" v-slot="scord" width="180">
<input @keydown="keyMove(scord,$event)" type="text"
:ref='`tableData${scord.column.property}${scord.$index}_ref`'
v-model="tableData[scord.$index][scord.column.property]">
</el-table-column>
<el-table-column prop="address" v-slot="scord" label="Address">
<input @keydown="keyMove(scord,$event)"
:ref='`tableData${scord.column.property}${scord.$index}_ref`'
v-model="tableData[scord.$index][scord.column.property]">
</el-table-column>
</el-table>
</template>
<script>
const tableData = [
{
date: '2016-05-031',
name: 'Tom',
address: [1, 2, 3, 4, 5],
},
{
date: '2016-05-02',
name: 'Tom',
address: [1, 2, 3, 4, 5],
},
{
date: '2016-05-04',
name: 'Tom',
address: [1, 2, 3, 4, 5],
},
{
date: '2016-05-01',
name: 'Tom',
address: [1, 2, 3, 4, 5],
},
]
export default {
data() {
return {
tableData
}
},
methods: {
keyMove(scord, event) {
if (event.ctrlKey) {
this.moveFouce(tableData, scord, event.keyCode)
}
},
moveFouce(num, scord, keyCode) {
var that = this.$refs
var row = scord.row
var property = scord.column.property
var obj = Object.keys(row)
var index = obj.indexOf(property)
var dataIndex = scord.$index
var refName
switch (keyCode) {
case 37: // 左箭头
refName = `tableData${obj[index - 1]}${dataIndex}_ref`
break
case 38: // 上箭头
refName = `tableData${obj[index]}${dataIndex - 1}_ref`
break
case 39: // 右箭头
refName = `tableData${obj[index + 1]}${dataIndex}_ref`
break
case 40: // 下箭头
refName = `tableData${obj[index]}${dataIndex + 1}_ref`
break
}
if (!refName) return
that[refName].focus()
}
}
}
</script>
Vue element 表格内容上下左右编辑
最新推荐文章于 2024-06-08 10:27:47 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)