【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

你在使用 iview 的过程中,有没有遇到过这样的需求(如下图):

 【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

 

最吸引眼球的地方,就是表格中的那个宽为2像素,颜色为蓝色的输入框了。

很明显,这就是想让我在 Table 中套用 Input 呀,so easy!

 接下来,上代码(此处我使用的iview版本为 v3.2.1):

  1、定义columns 和 datalist:

    【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

  2、定义 Table:

    【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

单纯的我以为,到这里,就已经大功告成了,迫不及待的打开了 Chrome ,迫不及待的试了一下。

【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

什么??为什么我每输入一个字符,这个input就会失去焦点?

待我冷静下来思考了一下,原来在 input 中的值发生变化的时候,就已经改变了 datalist 这个变量,table 已经被重新渲染,所以就会失去焦点。(此处应该有掌声)

原因找到了,这还没完,找到解决问题的办法才是重点。

首先我的思路就是,将input输入时改变的值与table中渲染的值分离开,理论上就可以了;

于是乎,我xue微地改造了一下代码:

    【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

    【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

    【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

当然了,你一定会发现我这里还用到了一个“神奇”的函数,美其名为 "cloneObj"

    【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

 接下来,才是真正见证奇迹的时刻:

【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

我刚才也提到了,我使用的iview版本为 v3.2.1,因为Table 从 3.2.0 版本开始,支持了 slot-scope 的写法,那 3.2.0 之前的版本该怎么写呢?

不急,不急,不急,咱接着往下看:

    【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

福利(https://www.cnblogs.com/likwin/p/10572596.html

这一需求到这里就结束了,那么,如果 Table 里嵌套 Select 呢?

我们下文见分晓!!

上一篇:MethodHandler笔记


下一篇:Angular使用echarts