html表格点击为编辑框,el-table表格内双击或单击单元格编辑输入框、日期等
需求
在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: "2021-03-09"
},
{
id: 1,
name: "施工許可階段",
planStartTime: "2021-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]
}
}
}
總結
以上是生活随笔為你收集整理的html表格点击为编辑框,el-table表格内双击或单击单元格编辑输入框、日期等的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2021高考成绩微信查询方法6,2021
- 下一篇： 高职学计算机专业排名,海南雅典职业技术学