el-input 获取焦点

384 阅读1分钟

el-input 获取焦点

el-input 当值为 0 时 显示无限大

<template>
    <div>
        <div @click="addItem"> + </div>
        <div v-for="(item,index) in list">
            {{item.flag}}
            <div v-if="!item.flag" @click="showItemInput(item,index)">无限大</div>
            <el-input :ref="'input_'+index" v-show="item.flag" @blur="item.flag = false;$forceUpdate()" v-model="item.inputValue" placeholder="请输入内容"></el-input>
        </div>
        <!--v-show="item.flag"-->
    </div>
</template>

<script>
    export default {
        name: "inputDemo",
        data() {
            return {
                inputValue: '',
                flag: false,
                list: [
                    {
                        flag: false,
                        inputValue: ''
                    },
                    {
                        flag: false,
                        inputValue: ''
                    }
                ]
            }
        },
        methods:{
            showInput(){
                this.flag = true;
                this.$nextTick(() => {
                    console.log(this.$refs['input'])
                    this.$refs['input'].$refs.input.focus();
                })
                this.$forceUpdate();
            },

            showItemInput(item,index){
                item.flag = true;
                this.$nextTick(() => {
                    // console.log(this.$refs['input'][index])
                    // this.$refs['input'][index].$refs.input.focus();
                    console.log(this.$refs['input_'+index])
                    this.$refs['input_'+index][0].focus();
                })
                this.$forceUpdate();
            },

            addItem(){
                this.list.push({
                    flag: false,
                    inputValue: ''
                })
            }
        }
    }
</script>

<style scoped>

</style>