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