el-table-column点击可编辑
时间: 2023-11-22 12:50:00 浏览: 104
根据提供的引用内容,el-table-column点击可编辑的实现需要以下步骤:
1. 在el-table-column标签中添加prop属性,用于指定该列对应数据的字段名。
2. 在el-table-column标签中添加edit-render属性,用于指定该列的编辑渲染方式。可以使用el-input等组件。
3. 在el-table-column标签中添加edit-methods属性,用于指定该列的编辑方法。可以使用handleInputBlur等方法。
4. 在el-table标签中添加@cell-dblclick事件,用于监听双击单元格的事件,并调用startEdit方法进入编辑状态。
5. 在methods中定义startEdit方法,用于将当前单元格设置为编辑状态。
下面是一个el-table-column点击可编辑的示例代码:
```html
<template>
<el-table :data="tableData" @cell-dblclick="startEdit">
<el-table-column prop="name" label="姓名" edit-render="{name: 'ElInput'}" edit-methods="{name: 'handleInputBlur'}">
<template slot-scope="scope">
<div class="input-box">
<el-input size="small" v-model="scope.row.name"></el-input>
</div>
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" edit-render="{name: 'ElInputNumber'}" edit-methods="{name: 'handleInputBlur'}">
<template slot-scope="scope">
<div class="input-box">
<el-input-number size="small" v-model="scope.row.age"></el-input-number>
</div>
<span>{{scope.row.age}}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
startEdit(row, column) {
this.$refs.table.toggleRowExpansion(row)
this.$nextTick(() => {
const cell = this.$refs.table.$el.querySelector(`.el-table__body-wrapper tbody tr:nth-child(${row.$index + 1}) td:nth-child(${column.index + 1}) .el-input__inner`)
cell.focus()
})
},
handleInputBlur() {
this.$refs.table.clearSelection()
}
}
}
</script>
```
阅读全文