iView/ViewDesign中render函数中输入框获得焦点(点击或者选择后)自动全选全部文本写法

2022-10-16 486点热度 0人点赞 0条评论

iView/ViewDesign中的table表格里有个render函数,可以在单元格中另外渲染组件,现在有个需求,就是渲染出来的Input输入框或者InputNumber数字输入框,需要在获取焦点的时候,自动全部全部文本,可以提高使用者输入的效率。

经过研究,可以使用on监听on-focus事件,在传入的event方法,使用event.target.select()就行了。

详见如下示例:

{title: '计划培训人数', key: "planNum", width: 112, align: 'center', render: (h, params) => {
        return h('div', [
            h('InputNumber', {
                props: {
                    min: 0,
                    max: 99999,
                    value: params.row.planNum,
                    precision: 0
                },
                style: {
                    width: '54px'
                },
                on: { // 操作事件
                    'on-focus': (event) => { event.target.select(); }, // 获得焦点后,选中全部
                }
            })
        ]);
    }
}

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论