实习期间遇到的前端问题 2

最新推荐文章于 2024-11-02 15:22:06 发布

しろいし

最新推荐文章于 2024-11-02 15:22:06 发布

阅读量103

点赞数 1

文章标签：学习前端 elementui vue

本文链接：https://blog.csdn.net/qq_44013675/article/details/134003935

版权

1.动态表格

实现效果：请添加图片描述
点击外部北部按钮动态增加表格的行。点击表格表格每行第二列的加减按钮，动态加减每行输入框

本质上也很简单：
1.动态增加表格行，就是动态去往表格绑定的数组里面添加元素（减少也同理）
2.动态增加输入框，也是动态去改变数组元素
3.如果希望指定位置去增加减少，那就必须传入索引值，然后根据索引值对数组进行操作。每行上的按钮的绑定方法传入scope.$index可以获取表格当前行的索引值。我的gif中的第二列依靠v-for完成，所以按钮的绑定方法传入v-for的index可以拿到索引值。然后使用js数组的splice来进行操作。

2.表单嵌套表格数据验证

一般有上面这种动态增减的需求一般也都是嵌套表单作为数据提交的一部分了。
所以针对这种v-for生成的数据的表单校验又是一个问题。请添加图片描述
参考了以下文章完成：对循环出来的表单，进行校验_a-form-item中遍历加判断_深圳最菜的前端的博客-CSDN博客

3.elswitch切换卡顿

列表表格里面嵌套的elswitch。
本来假数据的时候很流畅，结果导入真实数据就卡顿。
后来发现是自己进行了误操作，本身是绑定的表格行数据中的isAvailable，由于有个需求是传过来后要把默认值设置为1，所以我一开始代码如下

.then(({ data }) => {
        if (data.status === 0) {
            this.dataList = data.data; //把数据传递给表格绑定的字段
            //默认设置为开启
            for(let i=0;i<dataList.length;i++)
            {
              list[i]["isAvailable"]=1;
            }
        } 
        else{}
      }

乍一看感觉没啥问题，但就是莫名其妙会卡顿。
结合网上稀少的相关情况说明后，加上个人理解，我想可能是因为我先是直接把原本数据扔给表格绑定字段了，表格数据马上渲染一次，结果我又一个循环来更新，每次更新表格又要渲染，导致了后续出现的卡顿情况。
总之后续代码改成：

.then(({ data }) => {

        if (data.status === 0) {
          let list=data.data; //先用临时变量存储后端传过来的数据
           //默认设置为开启
          for(let i=0;i<list.length;i++)  //对临时变量进行处理
          {
            list[i]["isAvailable"]=1;  
          }
          this.dataList = list;  //处理好之后才传递给前端表格绑定的字段
        } else {}