html表格点击为编辑框,el-table表格内双击或单击单元格编辑输入框、日期等
需求
在el-table中想要直接點(diǎn)擊單元格直接由文字顯示變?yōu)榫庉嬁驙顟B(tài)，而非一整行編輯或者通過展示模態(tài)框編輯，這樣目標(biāo)性會(huì)比較清楚且頁(yè)面較簡(jiǎn)潔。下面直接上代碼！
實(shí)現(xiàn)效果
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="請(qǐng)選擇開始日期"
@blur='blurInput(scope.row.id,"planStartTime",scope.row.planStartTime)' v-focus>
{{scope.row.planStartTime}}
js代碼
export default {
data() {
return {
//表格數(shù)據(jù)
tableList: [
{
id: 0,
name: "規(guī)劃許可階段",
planStartTime: "2021-03-09"
},
{
id: 1,
name: "施工許可階段",
planStartTime: "2021-03-09"
}
],
showInput: "",
oldData: {}
}
},
directives: {
// 通過自定義指令實(shí)現(xiàn)的表單自動(dòng)獲得光標(biāo)的操作
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: {
// 當(dāng)input失去光標(biāo)后進(jìn)行的操作
async blurInput(id, name, value) {
let obj = {}
// 判斷數(shù)據(jù)是否有所改變，如果數(shù)據(jù)有改變則調(diào)用修改接口
if (this.oldData[name] != value) {
obj[name] = value //被改變的數(shù)據(jù)
// 然后再寫調(diào)用接口，提交內(nèi)容的東西就可以了
console.log("===值改變了")
}
this.showInput = ""
},
/*
方法參數(shù)皆為框架方法的默認(rèn)傳參
row 行數(shù)據(jù)
column 被點(diǎn)擊的觸發(fā)了方法的單元格
event 事件
*/
tableDbEdit(row, column, event) {
this.showInput = column.property + row.id
this.oldData[column.property] = row[column.property]
}
}
}
總結(jié)
以上是生活随笔為你收集整理的html表格点击为编辑框,el-table表格内双击或单击单元格编辑输入框、日期等的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2021高考成绩微信查询方法6,2021
- 下一篇： 高职学计算机专业排名,海南雅典职业技术学