前因:
用elementUI中的el-tabley以及el-input做一个操作框点击文字时可以直接编辑操作按钮的功能,如下图:
点击文字前:
点击文字后:
后果:每次点击后都无法自动选中输入框的文字,试了很多方法都不行,如下图
解决方法:经过多方实验,最后终于找到原因了
代码如下
<el-table-column
v-if="tableBtnOptions"
:label="tableBtnOptions.label || '操作'"
:prop="tableBtnOptions.prop"
:width="tableBtnOptions.width || 120"
:align="tableBtnOptions.align || 'center'"
v-bind="tableBtnOptions.attrs"
>
<!-- 这个地方必须要用 v-slot="{row}",不然下面的input框无法自动聚焦 -->
<template v-slot="{row}">
<div class="flex-center f-w">
<div
class="flex-div"
v-for="(btnItem, index) in tableBtnOptions.btnOptions"
:key="index"
>
<div style="font-size:14px;color:#409eff">
<div
v-if="!btnItem.edit"
@click="toEdit(btnItem, btnItem.btnText)"
>
{{ btnItem.btnText }}
</div>
<el-input
v-else
v-model="btnItem.btnText"
:focus="true"
@blur="toText(btnItem, btnItem.btnText)"
@keyup.enter.native="toText(btnItem, btnItem.btnText)"
:id="`input${btnItem.btnText}`"
></el-input>
</div>
<div class="img-css flex-center f-d-r">
<img
alt=""
class="image-css"
:src="require('@/assets/code_auto/add.png')"
@click="operate('table-btn', btnItem.btnText)"
/>
<img
alt=""
class="image-css"
:src="require('@/assets/code_auto/take_away.png')"
@click="operate('table-btn', btnItem.btnText, 'del')"
/>
</div>
</div>
</div>
</template>
</el-table-column>
研究了好久,如果确实帮助到了大家,记得给个点赞哟~万分感谢~