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;
}
阅读是一种修养,分享是一种美德。

浙公网安备 33010602011771号