element table表格點選單元格實現編輯
阿新 • • 發佈：2019-08-05
需求：雙擊tab列表對應單元格進行編輯，離開時儲存
實現方式：
<el-table
:data="dataDetail.judgmentLetterDets"
:row-class-name="tableRowClassName"
border
style="width: 100%"
max-height="500px"
@cell-click="tabClick">
<el-table-column
prop="reason"
label="原因說明"
align="center">
<template slot-scope="scope">
<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '原因說明'">
<el-input v-model="scope.row.reason" maxlength="300" placeholder="請輸入原因" size="mini" @blur="inputBlur"/>
</span>
<span v-else>{{ scope.row.reason }}</span>
</template>
</el-table-column>
<el-table-column
prop="judgmentAmount"
label="判責金額(元)"
width="120px"
align="center">
<template slot-scope="scope">
<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '判責金額(元)'">
<el-input
v-model="scope.row.judgmentAmount"
:blur="inputBlur"
placeholder="請輸入判責金額"
size="mini"
@blur="inputBlur"/>
</span>
<span v-else>{{ scope.row.judgmentAmount | fmoney }}</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="備註" align="center" width="180">
<template slot-scope="scope">
<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '備註'">
<el-input v-model="scope.row.remark" maxlength="300" placeholder="請輸入備註" size="mini" @blur="inputBlur"/>
</span>
<span v-else>{{ scope.row.remark }}</span>
</template>
</el-table-column>
</el-table>
// js
data() {
return {
tabClickIndex: null, // 點選的單元格
tabClickLabel: '', // 當前點選的列名
}
},
methods: {
tableRowClassName({ row, rowIndex }) {
// 把每一行的索引放進row
row.index = rowIndex
},
// 新增明細原因 row 當前行 column 當前列
tabClick(row, column, cell, event) {
switch (column.label) {
case '原因說明':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
case '判責金額(元)':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
case '備註':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
default: return
}
console.log('新增明細原因', this.tabClickIndex, row, column, cell, event)
},
// 失去焦點初始化
inputBlur(row, event, column) {
this.tabClickIndex = null
this.tabClickLabel = ''
},
}