zoukankan      html  css  js  c++  java
  • 【 iview 实践指南】之如何优雅地在"Table"中嵌套"Input"

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

     

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

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

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

      1、定义columns 和 datalist:

        

      2、定义 Table:

        

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

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

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

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

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

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

        

        

        

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

        

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

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

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

        

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

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

    我们下文见分晓!!

    author:Lik
    Endeavoring to powerless, struggling to move yourself.
  • 相关阅读:
    20.12.21 leetcode316
    20.12.18 leetcode389
    NOIP2017退役记
    DNA序列 LOJ NOIP模拟赛 D1T1 字符串哈希
    解药还是毒药 codevs2594 状态压缩 BFS
    换教室 vijos2005 NOIP2016 D1T3 期望DP 图论最短路(雾)
    都市大飙车 UESTC 1652 概率DP
    添加括号 vijos1038 动态规划 区间DP
    一道神奇的并查集
    还有一道神奇的暴力(正解是要旋转坐标轴的)
  • 原文地址:https://www.cnblogs.com/likwin/p/10572203.html
Copyright © 2011-2022 走看看