vue使用element-ui實現table表格資料行內編輯
阿新 • • 發佈:2021-02-16
技術標籤:vue的埋坑記錄javascriptvue.jshtmlnode.js
需求背景:滑鼠雙擊編輯行內內容
實現思路:雙擊時獲取到被點選的單元格元素,配合element內建方法,實現表單的顯示與隱藏
當某表單內容顯示時,自動獲取游標,點選其他位置時表單會失去游標觸發方法,其中一些方法是根據我自己當時的專案需要配合實現的,單獨寫了個相似的demo總結一下,還有很多可以改進的地方。
實現效果
html程式碼
<template>
<div id="app">
<!-- @cell-dblclick="tableDbEdit" 當單元格被雙擊擊時會觸發tableDbEdit事件,將文字變成input輸入框-->
<el-table ref="table" :data="tableList" border style="width: 100%"
@cell-dblclick="tableDbEdit">
<el-table-column prop="title" label="標題">
<template slot-scope="scope">
<!-- 條件判斷如果滿足則顯示錶單,否則預設展示文字 -->
<el-input type="textarea" size="small"
v-model="scope.row.title"
v-if="showInput == `title${scope.row.id}`"
@blur='blurInput(scope.row.id,"title",scope.row.title)'
v-focusTextarea>
</el-input>
<p v-else >{{scope.row.title}}</p>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<el-input size="small"
v-model="scope.row.name"
v-if="showInput == `name${scope.row.id}`"
@blur='blurInput(scope.row.id,"name",scope.row.name)'
v-focus>
</el-input>
<p v-else>{{scope.row.name}}</p>
</template>
</el-table-column>
<el-table-column label="品種" width="150" prop="type">
<template slot-scope="scope">
<el-input size="small"
v-model="scope.row.type"
v-if="showInput == `type${scope.row.id}`"
@blur='blurInput(scope.row.id,"type",scope.row.type)'
v-focus></el-input>
<p v-else>{{scope.row.type}}</p>
</template>
</el-table-column>
</el-table>
</div>
</template>
javascript程式碼
<script>
export default {
data() {
return {
tableList: [{//表格資料
id:0,
name: '王皮皮',
title: '在家小霸王,出門小王八',
type: '中華田園貓'
},{
id:1,
name: '王皮皮',
title: '在家小霸王,出門小王八',
type: '中華田園貓'
},{
id:2,
name: '王皮皮',
title: '在家小霸王,出門小王八',
type: '中華田園貓'
},{
id:3,
name: '王皮皮',
title: '在家小霸王,出門小王八',
type: '中華田園貓'
}],
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//被改變的資料
// 然後再寫呼叫介面,提交內容的東西就可以了
}
this.showInput = ""
},
/*
方法引數皆為框架方法的預設傳參
row 行資料
column 被點選的觸發了方法的單元格
event 事件
*/
tableDbEdit(row, column, event) {
this.showInput = column.property + row.id
this.oldData[column.property] = row[column.property]
},
}
}
</script>
<style scoped>
#app {
width: 1000px;
margin: 0 auto;
}
</style>