editable tables are implemented with the help of others, and then moved through input through keyboard events. I try to combine them, probably as follows: click on the cell to trigger the cell event to get focus: with the keyboard event, you can freely move to other cells and get focus. Although I realized that the focus of moving the keyboard to the next cell was to get the focus of the next cell, it was still too messy to figure it out. I also ask the experts to give some advice to the younger generation.
the following is a keyboard event that moves on input
<template>
<el-container>
<el-main>
<el-table :data="tableData" border style="width: 100%" ref="table">
<el-table-column align="center" prop="name" label="" width="150">
</el-table-column>
<el-table-column align="center" sortable prop="normalB" label="">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="" v-model="scope.row.normalB" @change="handleCreditChange()" class="table_input normalB_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
<el-table-column align="center" sortable prop="normalY" label="()">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="" v-model="scope.row.normalY" @change="handleCreditChange()" @blur="handleBalanceBlur($event)" @focus="handleBalanceClear($event)" class="table_input normalY_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
<el-table-column align="center" sortable prop="focusB" label="">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="" v-model="scope.row.focusB" @change="handleCreditChange()" class="table_input focusB_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
data :"2",
didata:"",
iddata:"",
tableData: [{
date: "2016-05-02",
name: "",
address: " 1518 "
}, {
date: "2016-05-04",
name: "",
address: " 1517 "
}, {
date: "2016-05-01",
name: "",
address: " 1519 "
}, {
date: "2016-05-03",
name: "",
address: " 1516 "
}]
}
},
methods:{
//
show(ev,index){
let newIndex ;
//ev input
let clssName = ev.target.offsetParent.className;
//
if(clssName.indexOf("normalB_input") != -1){
this.data = index
this.didata = index*3 ;
newIndex = index*3 ;
} else if (clssName.indexOf("normalY_input") != -1) {
this.data = index
this.didata = index*3 + 1 ;
newIndex = index*3 + 1 ;
} else if (clssName.indexOf("focusB_input") != -1) {
this.data = index
this.didata = index*3 + 2;
newIndex = index*3 + 2;
}
//input
let inputAll = document.querySelectorAll(".table_input input");
this.iddata = inputAll
// =38
if(ev.keyCode == 38){
//
if(newIndex >=1 && newIndex<=2){
newIndex = newIndex + 8;
} else {
newIndex -= 3 ;
}
if( inputAll[newIndex] ){
inputAll[newIndex].focus();
}
}
// = 40
if(ev.keyCode == 40){
//newIndex
if(newIndex>= 9 && newIndex<11){
newIndex = (newIndex%8)
}else {
newIndex += 3 ;
}
if( inputAll[newIndex] ){
inputAll[newIndex].focus();
}
}
// = 37
if(ev.keyCode == 37){
newIndex -= 1 ;
if( inputAll[newIndex] ){
inputAll[newIndex].focus();
}
}
// = 39
if(ev.keyCode == 39){
newIndex =newIndex+1 ;
if( inputAll[newIndex] ){
inputAll[newIndex].focus();
}
}
},
}
}
</script>
the following is realized by referring to https://codeshelper.com/q/10.... The main function of
is to click on the cell to become edited
<template>
<el-container>
<el-main>
<el-table :data="tableData" size="mini" border @cell-click="celledit" style="width: 353px;height:455px" row-style="height:20px" cell-style="padding:0" >
<el-table-column type="index"></el-table-column>
<el-table-column prop="name" label="" width="122">
<template slot-scope="scope">
<el-autocomplete
size = "mini"
v-if="scope.row.name.edit"
v-model="scope.row.name.value"
ref="name" style="width: 110px"
:fetch-suggestions="querySearch"
placeholder=""
@blur="handleSelect(scope.row)"
></el-autocomplete>
<span v-else>{{ scope.row.name.value }}</span>
</template>
</el-table-column>
<el-table-column prop="number" label="" width="60px" edit="false">
<template slot-scope="scope">
<input size="mini" v-if="scope.row.number.edit" ref="number" v-model="scope.row.number.value" style="width:45px;margin-left:150px; " @blur="scope.row.number.edit = false" >
<span v-else>{{ scope.row.number.value }}</span>
</template>
</el-table-column>
<el-table-column prop="unit_price" width="60" label="">
<template slot-scope="scope">
<el-input size="mini" v-if="scope.row.unit_price.edit" ref="unit_price" v-model="scope.row.unit_price.value" style="width: 100%" @blur="scope.row.unit_price.edit = false" ></el-input>
<span v-else>{{ scope.row.unit_price.value }}</span>
</template>
</el-table-column>
<el-table-column prop="moeny" width="60" label="">
<template slot-scope="scope">
<span >{{ scope.row.moeny.value }}</span>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
restaurants: [],
tableData: [],
};
},
created() {
this.formatData()//
},
mounted() {
this.restaurants = this.loadAll();//
},
computed:{
formatData(){ ////
for (var i=1;i<11;iPP){
this.tableData.push({"name":"","number":"","unit_price":"","moeny":""})
}
this.tableData.forEach(item => {
for( var key in item) {
item[key] = {
value: item[key],
edit: false
}
}
})
},
},
methods: {
handleSelect(row,id){
setTimeout(() =>{ //
row.name.edit = false
},170);
},
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// callback
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "", "address": "144" },
{ "value": "Hot honey ", "address": "661" },
{ "value": "", "address": "9886113" },
{ "value": "()", "address": "438" },
{ "value": "", "address": "96811818-101" },
{ "value": "", "address": "633" }]
},
celledit(row, column, cell, event){
if(row[column.property]){
row[column.property].edit = true
setTimeout(() => {
this.$refs[column.property].focus()
}, 20)
}
}
}
};
</script>