需求
在el-table中想要直接点击单元格直接由文字显示变为编辑框状态，而非一整行编辑或者通过展示模态框编辑，这样目标性会比较清楚且页面较简洁。下面直接上代码！
实现效果
html代码
@blur='blurInput(scope.row.id,"name",scope.row.name)' v-focus>
{{scope.row.name}}
type="date" :clearable="false" value-format="yyyy-MM-dd" placeholder="请选择开始日期"
@blur='blurInput(scope.row.id,"planStartTime",scope.row.planStartTime)' v-focus>
{{scope.row.planStartTime}}
js代码
export default {
data() {
return {
//表格数据
tableList: [
{
id: 0,
name: "规划许可阶段",
planStartTime: "-03-09"
},
{
id: 1,
name: "施工许可阶段",
planStartTime: "-03-09"
}
],
showInput: "",
oldData: {}
}
},
directives: {
// 通过自定义指令实现的表单自动获得光标的操作
focus: {
inserted: function(el) {
if (el.tagName.toLocaleLowerCase() == "input") {
el.focus()
} else {
if (el.getElementsByTagName("input")) {
el.getElementsByTagName("input")[0].focus()
}
}
el.focus()
}
},
focusTextarea: {
inserted: function(el) {
if (el.tagName.toLocaleLowerCase() == "textarea") {
el.focus()
} else {
if (el.getElementsByTagName("textarea")) {
el.getElementsByTagName("textarea")[0].focus()
}
}
el.focus()
}
}
},
// 方法
methods: {
// 当input失去光标后进行的操作
async blurInput(id, name, value) {
let obj = {}
// 判断数据是否有所改变，如果数据有改变则调用修改接口
if (this.oldData[name] != value) {
obj[name] = value //被改变的数据
// 然后再写调用接口，提交内容的东西就可以了
console.log("===值改变了")
}
this.showInput = ""
},
/*
方法参数皆为框架方法的默认传参
row 行数据
column 被点击的触发了方法的单元格
event 事件
*/
tableDbEdit(row, column, event) {
this.showInput = column.property + row.id
this.oldData[column.property] = row[column.property]
}
}
}
