1、type类型为text时的示例代码
<template slot-scope="scope"> <el-input type="textarea" v-model="scope.row.value" :maxlength="valueMaxLength" @input="handleInput(scope.row)"></el-input> <span class="el-input__count">{{scope.row.valueCount}}</span> </template> const VALUE_MAX_LENGTH = 10
data() {
return {
valueMaxLength: VALUE_MAX_LENGTH
}
}
handleInput(row) { if (row) { if (row.value) { let length = row.value.length row.valueCount = length + '/' + VALUE_MAX_LENGTH } else { row.valueCount = '0/' + VALUE_MAX_LENGTH } } else { row.valueCount = '0/' + VALUE_MAX_LENGTH } } .el-input__count { color: #909399; background: #fff; position: absolute; font-size: 12px; bottom: 10px; right: 20px; }
2、type类型为textarea时的示例代码
<el-input v-model="value" :maxlength='valueMaxLength' @input="handleInput"> <i slot="suffix" class="el-input__count">{{valueCount}}</I> </el-input> const VALUE_MAX_LENGTH = 10 data() { return { valueMaxLength: VALUE_MAX_LENGTH } } handleInput(value) { if (value) { let length = value.length this.valueCount = length + '/' + this. valueMaxLength } else { this.valueCount = '0/' + this. valueMaxLength } } .el-input__count { line-height: 35px; background: #fff; color: #909399; font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif; }