vxe-table 可编辑表格不需要点击自动聚焦显示输入框
时间: 2023-10-02 11:06:11 浏览: 1168
【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx
你好,关于vxe-table可编辑表格不需要点击自动聚焦显示输入框的问题,可以通过以下两种方式来实现:
1. 在vxe-table的column配置项中,将edit-render配置项的autofocus属性设置为true,即可在进入编辑模式时自动聚焦显示输入框。
示例代码如下:
```
{
title: '姓名',
key: 'name',
editRender: {
autofocus: true,
name: 'input'
}
}
```
2. 在vxe-table的mounted生命周期函数中,通过$refs获取到可编辑表格的单元格元素,然后手动调用focus方法,使其自动聚焦显示输入框。
示例代码如下:
```
mounted() {
const cell = this.$refs.table.getCell({rowIndex: 0, columnIndex: 0})
cell && cell.$el.querySelector('.vxe-input').focus()
}
```
以上两种方式都可以实现可编辑表格不需要点击自动聚焦显示输入框的效果。
阅读全文