Open
Description
有多种方法实现：
第一种：利用table的cell-dblclick和cell-style
1.template
<el-table
:data="tableData"
border
@cell-dblclick="doubleClickCell"
highlight-current-row
:cell-style="defineRow"
style="width: 100%">
<el-table-column
type="index"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="username"
label="负责人"
width="180">
<template v-slot="{ row, column, $index }">
<el-input
:ref="$index"
v-show="editCurrentCell(row, column, $index)"
v-model="row.username"
@blur="test"
placeholder="请输入姓名">
</el-input>
<span v-show="!editCurrentCell(row, column, $index)"<
87B5
/span>>{{ row.username }}</span>
</template>
</el-table-column>
</el-table>2.JS
methods: {
doubleClickCell (row, column, cell, event) {
if (column.property !== 'username') { // 判断这几列是否可编辑
return
}
this.clickRowIndex = row.rowIndex
this.clickColProps = column.property
},
getRowKeys (row) {
return row.username
},
defineRow (obj) { //重点是这个函数，给row添加rowIndex属性，以便在doubleClickCell函数中使用
Object.defineProperty(obj.row, 'rowIndex', {
value: obj.rowIndex,
writable: true,
enumerable: false
})
},
editCurrentCell (row, col, index) {
if (row.rowIndex === this.clickRowIndex && col.property === this.clickColProps) {
return true
}
return false
}
}第二种方法：在tableData中添加选中态编辑
- template
<el-table
:data="tableData"
border
highlight-current-row
style="width: 100%">
<el-table-column
type="index"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="username"
label="负责人"
width="180">
<template v-slot="{ row, column, $index }">
<el-input
:ref="$index"
v-show="row[`${column.property}Edit`]"
v-model="row.username"
placeholder="请输入姓名">
</el-input>
<span
@dblclick="doubleClickCell($index, column)"
v-show="!row[`${column.property}Edit`]"
>
{{ row.username }}
</span>
</template>
</el-table-column>
</el-table>2.js
data () {
return {
tableData: [{
username: 'lily',
usernameEdit: false,//编辑态标识
}, {
username: 'tony',
usernameEdit: false,
}],
}
}
methods: {
doubleClickCell (rowIndex, col) {
this.$set(this.tableData[rowIndex], `${col.property}Edit`, true)
},
}