uses the frame is vue+Element-UI,
now encounters the problem is in a table, there is a grade table.
Click the current cell input tag to display and get focus, change the value after losing focus to save data, input hide,
vue official website has a custom instruction, is used to get focus. But it doesn"t seem to work for me. Let"s see if there are any other ways. Let"s look at the code next!
`
<el-table-column prop="orderCount" label="" align="center">
<template slot-scope="{row,$index}">
<div>
<!-- @click="chengenum($index)" -->
<!-- v-show="!editable[$index]" :class="editable[$index] ? "activeClass" : "count-num"" -->
<el-input type="text"
v-show="editable[$index]"
v-model.number.lazy="row.orderCount"
v-on:blur="changeCount(row,$index)"></el-input>
<span @click="chengenum($index)" v-focus class="input-num" v-show="!editable[$index]">{{row.orderCount}}</span>
</div>
</template>
</el-table-column>
`
changeCount(row, index) {
this.grade = row.orderCount * 1;
let _this = this;
let datecount = {
id: row.id,
orderCount: _this.grade
};
let sorting = "";
_this
.$http({
method: "POST",
async: true,
url: sorting,
data: datecount
})
.then(
function(res) {
if (res.data.success) {
_this.$message.success("");
// _this.onSubmit();
} else {
_this.$message.error("");
}
},
function() {
_this.$message.error("");
}
);
this.$set(_this.editable, index, false);
},
chengenum(row) {
console.log(row)
this.$nextTick(function() {
this.editable[row] = true;
this.$set(this.editable, row, true);
setTimeout(
function () {
},60);
});
},
`