elementUI2.8.2版本之前如何添加字符数统计

  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;
}
原文地址:https://www.cnblogs.com/bien94/p/12920345.html