前言
最近做的一個(gè)表格谬莹，有改某個(gè)單元格的需求，經(jīng)過(guò)研究完美實(shí)現(xiàn)此功能桩了，以下簡(jiǎn)要介紹下實(shí)現(xiàn)過(guò)程:
所用前端工具
效果圖
效果圖.gif
實(shí)現(xiàn)過(guò)程
<el-table
:data="dataList"
border
v-loading="loadingFlag"
style="width: 100%;"
size="small"
@selection-change="selectChange"
>
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column type="index" align="center" label="序號(hào)" width="60"></el-table-column>
<el-table-column
align="center"
label="名稱(chēng)"
min-width="120"
>
<!--關(guān)鍵代碼-->
<template slot-scope="scope">
<el-input v-if="scope.row.isSelected" v-model="scope.row.name" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
<p @click="cellClick(scope.row)" v-else>{{scope.row.name}}</p>
</template>
</el-table-column>
<el-table-column label="地址" prop="mac" align="center"></el-table-column>
<el-table-column label="類(lèi)型" prop="type" align="center"></el-table-column>
<el-table-column label="組" prop="group" align="center"></el-table-column>
<el-table-column label="域" prop="zoom" align="center"></el-table-column>
<el-table-column label="創(chuàng)建時(shí)間" prop="time" align="center"></el-table-column>
</el-table>
export default {
data () {
return {
dataList: [],
loadingFlag: true
}
},
components: {
PageTitle
},
directives: {
focus: {
inserted: function (el) {
el.querySelector('input').focus()
}
}
},
created () {
this.getList()
},
methods: {
getList () {
this.$http.get('/list').then(res => {
if (res.status === 200) {
this.loadingFlag = false
this.dataList = res.data.map(item => {
return {...item, isSelected: false}
})
console.log(this.dataList)
}
})
},
selectChange (e) {
console.log(e)
},
focusEvent (row) {
row.oldName = row.name
},
blurEvent (row) {
row.isSelected = !row.isSelected
if (row.name !== row.oldName) {
// 附帽。。井誉。此處代碼省略（調(diào)用修改名稱(chēng)接口）
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
})
}
},
cellClick (row) {
row.isSelected = !row.isSelected
}
}
}
內(nèi)容詳解
-
methods中getList方法在拿到后臺(tái)數(shù)據(jù)后給數(shù)組對(duì)象每一項(xiàng)中添加了同一個(gè)屬性isSelected,即：
this.dataList = res.data.map(item => {
return {...item, isSelected: false}
})
- 有了
isSelected屬性后我們可以控制每一項(xiàng)名稱(chēng)的<el-input>和<p>標(biāo)簽的顯示隱藏蕉扮，從而來(lái)實(shí)現(xiàn)點(diǎn)擊單元格即自動(dòng)聚焦修改名稱(chēng)
<template slot-scope="scope">
<el-input v-if="scope.row.isSelected" v-model="scope.row.name" @focus="focusEvent(scope.row)" @blur="blurEvent(scope.row)" v-focus></el-input>
<p @click="cellClick(scope.row)" v-else>{{scope.row.name}}</p>
</template>
-
focusEvent方法是為了記錄用戶聚焦該行前，該行的name值：
focusEvent (row) {
row.oldName = row.name
},
- 失去焦點(diǎn)時(shí)颗圣，比較
oldName和name是否相同
blurEvent (row) {
// 目的是為了讓<el-input>標(biāo)簽隱藏
row.isSelected = !row.isSelected
if (row.name !== row.oldName) {
// 喳钟。屁使。。此處代碼省略（調(diào)用修改名稱(chēng)接口）
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
})
}
},
- 接下來(lái)要講為什么要用自定義指令
v-focus奔则，當(dāng)給<el-input>標(biāo)簽添加autofocus發(fā)現(xiàn)無(wú)效蛮寂，然后看到網(wǎng)上提供的思路遂使用vue框架提供的directives：
directives: {
focus: {
inserted: function (el) {
el.querySelector('input').focus()
}
}
},
- 目的就是為了在點(diǎn)擊
<p>標(biāo)簽的同時(shí)，顯示<el-input>標(biāo)簽并使其聚焦 - 這里說(shuō)明一下
cellClick事件之所以加在<p>標(biāo)簽上是防止點(diǎn)擊<el-input>時(shí)也觸發(fā)cellClick事件,如果加在它們的父級(jí)上會(huì)出現(xiàn)我說(shuō)的這種情況易茬。
版權(quán)聲明：本文為CSDN博主「寶貝QY」的原創(chuàng)文章酬蹋，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明抽莱。
原文鏈接：https://blog.csdn.net/qq_36070288/article/details/103977413
