Vue-在表格中插入input输入框

697 阅读1分钟

需求:表格中插入输入框方便用户自行填入排名,填入的排名会同步显示到另一个页面上展示。

如图:

image.png

另一个页面如图

image.png

由于第二个页面改动较小,在此处只是在接口处新增一个排名的字段换上就行,其他都是调用接口,主要陈述第一个页面如何实现。

主要思路:<el-table-column>套个<el-input>,中间使用插槽,方便拿到行数据,要把整行的数据重新赋值才行,不然赋不上值。给input一个失去焦点触发的事件,用户输入完之后点击空白处或接着输入下一个数据即可保存,操作成功给用户个提示比较好。 具体代码如下:

1f8482b8503c8aa7c27b6d6f83bdd25.png

b0428bf9126f95971d6653106ba944e.png

/IndSignUp是编辑保存的接口,row是形参。 请多多指教,谢谢!