vue+element中，el-input type=“textarea“ 实现自定义末端行数限制提示

# 最近遇到一个需求：el-input type="textarea" 实现末端自定义行数限制提示，一直没写过，需求如图所示：#

根据element 官网上的用法：<el-input type='textarea' placeholder='请输入'/>

<el-input />有个属性是show-word-limit配合:maxlength="10000"使用，就会出现在文本框的右下角提示字数显示：已输入/最大可输入字符。但是我发现如果要实现需求图中的效果，这个属性是没办法使用的，然后看了一下相关的源码，textarea是没有这种的属性，也没有插槽用法。于是另辟蹊径，发现了一个新的写法，话不多说，直接上代码片段1：

<el-input v-model="dialogForm.mb_group" type="textarea" placeholder="请输入7到15位数字格式号码，多个目标号用回车间隔" id="areaid" :autosize="{ minRows: 5, maxRows: 10000 }"></el-input>
<span class="el-input__count" id="spanid">{{max_Rows}}/10000行</span>

此处，定义两个id非常重要，不可不写！！！

此外，还需要在created函数中加入三行代码，代码片段2：

created(){
    this.$nextTick(() => {
       let element1 = document.getElementById('spanid');
       const targetElement = document.getElementById('areaid');
       targetElement.after(element1);
    })
},

以上就是完整代码。

重要提示：如果是在el-dialog中，则需要在页面节点加载出来之后，加入该代码，否则，页面控制台会报错：......Cannot read properties of null (reading 'after')，这个报错大概意思就是没有获取到节点，所以该方法失效导致报错。

可能会遇到的一些问题以及解决办法：

代码片段3：

<el-dialog title="新增群发" :visible.sync="openDialog" append-to-body width="900px"></el-dialog>

如果还不能理解的小伙伴，可以看代码解释：在openDialog=true的时候，在后面加上this.$nextTick(()=>{  /**（此处代码省略，直接将代码片段2中的三行代码，放在此处）*/   })

代码片段4：

有的小伙伴，如果el-dialog封装成了组件，即使按照上方写法，则可能还会报错，则解决办法是：

在父页面father.vue中，dialog组件标签中加入v-if='xxx'判断，当点击按钮的时候，让xxx=true，以下是父子组件代码，我放在一起了：

/** 父组件father.vue*/
<template>
    <div>
        <el-button type="primary" icon="el-icon-add" size="mini" @click="dialogHandle('chilRef')">新增群发</el-button>
        <child ref="childRef" v-if="childDialog"/>
    </div>


</template>
<script>
// child.vue和father.vue在同一个文件夹下面

import child from './child.vue'

export default{
    name:'father',
    data(){
        return{
            childDialog:false,
        }
    },
    methods:{
        dialogHandle(refName){
            switch(refName){
                case 'childRef':
                    this.childDialog=true;
                break;
                default:
                    break;
            }
            this.$nextTick(() => {
                this.$refs[refName].initData()
            })
        }
    }
}
</script>

/** 子组件child.vue*/
<template>
    <div>
        <el-dialog title="我是子组件弹出框" :visible.sync="openDialog" append-to-body width="900px">
            <el-form ref="formRef" :model="dialogForm" label-width="180px" :rules="formRules">
                <el-form-item label="文本框" prop="mb_group">
                    <el-input v-model="dialogForm.mb_group" type="textarea" placeholder="请输入7到15位数字格式号码，多个目标号用回车间隔" id="areaid" :autosize="{ minRows: 5, maxRows: 10000 }"></el-input>
                    <span class="el-input__count" id="spanid">{{max_Rows}}/10000行</span>
                </el-form-item>
            </el-form>
             <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitScope"> 确定 </el-button>
                <el-button @click="openDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default{
    name:'father',
    data(){
        return{
            openDialog:false,
            dialogForm:{
                mb_group:null,
            },
            formRules:{
                mb_group: [{ required: true, message: "请输入", trigger: ["blur", 'change']}]
            },
            max_Rows:0,//当前输入的行数，可以自定义输入框的校验规则中写，然后根据当前输入的内容获取，内容是个字符串，如果字符串是'123\n456\n'再通过split将字符串转成数组['123','','456','']，数组的长度4即为当前的行数4。根据需求来，思路是这样，此处的代码就省略了。
        }
    },
    methods:{
        initData(){
            this.openDialog=true;
            this.$nextTick(() => {
                let element1 = document.getElementById('spanid');
                const targetElement = document.getElementById('areaid');
                targetElement.after(element1);
            })
        },
        submitScope(){
            this.$refs['formRef'].validate(valid => {
                if(valid){
                    console.log(this.dialogForm,'dialogForm')
                }
            })
        }
    }
}
</script>

最后，如果有更好的解决办法，欢迎大家留言。感谢观看！