el-table 单元格编辑
作者:互联网
<template>
<div class="app-container">
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column align="center" label="ID" width="95">
<template slot-scope="scope">
<el-input v-model="scope.row.id"
v-bind:ref="'r'+ scope.$index + 'c' + 1"
@input='input(scope.row, scope.row.id, range.value)'
@keyup.native="keyup($event, scope.$index, 1)"
@change='save(scope.row)'></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="author" width="95">
<template slot-scope="scope">
<el-input v-model="scope.row.author"
v-bind:ref="'r'+ scope.$index + 'c' + 2"
@input='input(scope.row, scope.row.author, range.value)'
@keyup.native="keyup($event, scope.$index, 2)"
@change='save(scope.row)'></el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getList } from '@/api/table'
export default {
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
return statusMap[status]
}
},
data() {
return {
list: null,
listLoading: true
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
getList().then(response => {
this.list = response.data.items
this.listLoading = false
})
},
keyup(ev, row, col) {
this.keyupTo(ev, row, col, this.list.length,2)
},
keyupTo(ev, row, col, rowCount, colCount) {
// 替代 switch 的优雅写法
const actions = {
'ArrowUp': () => {
row--
if (row < 0) row = rowCount - 1
},
'ArrowDown': () => {
row++
if (row >= rowCount) row = 0;
},
'ArrowLeft': () => {
col--
if (col < 1) col = colCount;
},
'ArrowRight': () => {
col++
if (col > colCount) col = 1
},
'Enter': () => {
col++
if (col > colCount) {
// 右下角的话保持不动
if (row === (rowCount - 1)) {
col = colCount
this.list.push({})
} else {
col = 1
row++
}
}
},
}
let action = actions[ev.key];
if (action !== undefined) {
action.call()
// 用 nextTick 避免 input 还没渲染出来
this.$nextTick(() => {
this.$refs['r' + row + 'c' + col].focus()
})
}
},
}
}
</script>
标签:el,++,单元格,rowCount,colCount,table,ev,col,row 来源: https://blog.csdn.net/az44yao/article/details/118978473