element-ui 組件-計數器el-input-number

element-ui 組件-計數器el-input-number


vue element
需求:在表格里加計數器
上圖片


<template>
    <el-table border style="width: 100%" :data="formData">
        <el-table-column prop="age" label="年齡" width="150"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column label="需完成指標" width="100">
          <template slot-scope="scope">
        <el-input-number v-model="scope.row.index" @change.native="changeNum" :min="1" :max="10"></el-input-number>
          </template>
        </el-table-column>
    </el-table>
</template>
<script>
export default {
  name: 'page4',
  data () {
    return {
      formData: [
        {
          age: 20,
          name: '小王',
          index: 1
        },
        {
          age: 23,
          name: '小陳',
          index: 1
        },
        {
          age: 21,
          name: '小李',
          index: 1
        }
      ],
      num: ''
    }
  },
  methods: {
    changeNum (value) {
      console.log(value)
    }
  }
}
</script>
————————————————
版權聲明：本文為CSDN博主「超級小草莓」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45888523/article/details/107974199