首页 > 其他 > 详细

vue + element plus 实现可编辑table

时间:2021-07-30 23:00:47      阅读:27      评论:0      收藏:0      [点我收藏+]
<el-table :data="tableData">
    <el-table-column label="序号" type="index"></el-table-column> 
    <el-table-column label="位置"> 
<template #default="scope">
<el-input :model-value="scope.row.positionCode" @input="value => handleInputChange(value, scope.row.index)">
</template>
</el-table-column>
</el-table>

可通过table插槽实现,需要使用model-value进行绑定,v-model绑定会出现不能单个绑定、一列值均发生变化的情况,通过触发input事件为table单元格赋值

js

data() {
    return{
       tableData: []
    }
}

methods: {
  // table动态生成多少条数据
  countChange (num) {
    this.currentData = []
    var index = 0
    var obj = {}
    for(var i = 0; i < num; i++){
      index++
      obj = {
        index: index,
        positionCode: null
      }
      this.currentData.push(obj)
    }
  }
    handleInputChange(val, index){ 
    this.currentData[index - 1].positionCode = val
  }
}

 

vue + element plus 实现可编辑table

原文:https://www.cnblogs.com/150536FBB/p/15081331.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!