+Vue+el-input のバックアップ(No.4)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+el-input へ行く。
- 1 (2022-06-22 (水) 12:00:54)
- 2 (2022-06-22 (水) 12:20:44)
- 3 (2022-08-24 (水) 18:41:54)
- 4 (2022-09-13 (火) 13:52:26)

※前提条件：本文基于 Vue 2.0 创作

输入限制
动态Style
监听是否有修改

输入限制 †[edit]

只可以输入数值

<el-input v-model.number="form.age"/>

对输入的字符串去掉前后空格

<el-input v-model.trim="xxxx">

↑

动态Style †[edit]

html

<el-table-column prop="note" label="备注">
  <template slot-scope="scope">
    <el-input
      type="textarea"
      :autosize="{ minRows: 1, maxRows: 5 }"
      placeholder="无"
      v-model="scope.row.note"
      :class="textareaNote"
      readonly
    >
    </el-input>
  </template>
</el-table-column>

javascript

data(){
  return {
    textareaNote:'textareaNote',
  }
}

css

<style>
.textareaNote > textarea {
  border: none !important;
  font-size: 12;
  font-family: 'Microsoft YaHei';
}
</style>

↑

监听是否有修改 †[edit]

使用 input 事件

<el-input v-model="scope.row.number" @input="handlerNgcountChange(scope.row)" />

コメント：