iview 使用总结

摘要：开发后台系统问题总结项目参考了用了包裹页面进行缓存点击可切换不会重新渲染在特定页面比如详情页需要每次刷新的时候添加进行相关的刷新导致了另外一个问题最初跳转时用的传参刷新参数就没了特改为传参涉及到关闭点击等多个问题用存储数据并做了最大限

vue+iview 开发后台系统问题总结

项目参考了iview-admin

用了keep-alive 包裹 router-view,页面进行缓存点击tag可切换,不会重新渲染

在特定页面比如详情页需要每次刷新的时候,添加watch $route 进行相关的刷新,导致了另外一个问题,最初跳转时用的 params传参,刷新参数就没了,特改为query传参.

涉及到关闭tag,点击tag,等多个问题,用vuex存储tags数据,并做了最大限制超过8个就splice(0,1)

主要是openName 这个props问题,即展开的menu name,采取的在根组件watch $route 根据router 的相应name 改变openName

表单有相应的验证问题,在FormItem 添加相应的ref 然后在脚本里自定义验证规则

   const validatesuffix = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("标识不能为空"));
      } else {
        let testReg = /^[a-zA-Z][a-zA-Z0-9]{1,5}$/;
        if (!testReg.test(value)) {
          callback(new Error("2~6位,只能输入英文数字(字母开头)"));
        } else {
          checkExit({
            suffix: { role: "10", suffix: value }
          }).then(res => {
            if (res.code == 0) {
              if (res.payload == true) {
                callback();
              } else {
                callback(new Error("标识不可用,请重新输入"));
              }
            }
          });
        }
      }
    };

项目用了很多table, iview 的table用render渲染列,不像element,模板比较简洁

表格里数据有点击操作,导致columns写很多

简单情况如下:

 render: (h, params) => {
            let arr = this.child;
            let count = 0;
            for (let item of arr) {
              count += item.betCount;
            }
            if (params.row.role == "1") {
              return h("span", count);
            } else {
              return h("span", params.row.betCount);
            }
          }

复杂情况:Poptip组件里再渲染table

render: (h, params) => {
            let column = [
              {
                title: "游戏",
                key: "name"
              },
              {
                title: "占成",
                key: "rate"
              }
            ];
            let data = [];
            let gameList = params.row.gameList;
            let len = gameList.length;
            for (let item of gameList) {
              let obj = {};
              obj.rate = item.rate + "%";
              obj.name = item.name;
              data.push(obj);
            }
            return h(
              "Poptip",
              {
                props: {
                  trigger: "hover"
                }
              },
              [
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer",
                      color: "#20a0ff"
                    }
                  },
                  len + "款游戏"
                ),
                h("Table", {
                  props: {
                    columns: column,
                    data: data,
                    border: true,
                    size: "small",
                    width: 250
                  },
                  slot: "content"
                })
              ]
            );
          }

事件处理:

return h(
                "Button",
                {
                  props: {
                    type: "text",
                    size: "small"
                  },
                  style: {
                    color: "#20a0ff"
                  },
                  on: {
                    click: () => {
                      let userId = params.row.userId;
                      let displayName = params.row.displayName;
                      let username = params.row.username;
                      let parent = params.row.parent;
                      this.$router.push({
                        path: "/dealerDetail",
                        query: {
                          userId,
                          displayName,
                          username,
                          parent
                        }
                      });
                    }
                  }
                },
                "查看"
              );

exportCsv()方法,导出csv文件,iview 并未对render函数做处理,导致导出的数据没有,只能写很多代码处理columns 列数据,以及data行数据,自定义导出,这个问题觉得该给iview团队提提,

问题2,给循环处理的table,导出数据

      

        ({{item.length > 0 && item[0].parentDisplayName ? item[0].parentDisplayName : ""}}) 下级列表
        导出数据
      
      
    

绑定的ref加上index,已获得当前表格,说到这个循环,想起另外一问题

 

      

        ({{item.childItem.length > 0 && item.childItem[0].parentDisplayName ? item.childItem[0].parentDisplayName : parentNameChild}}) 下级列表
        
          
          
          
        
      
      
    

给循环的table 绑定RadioGroup v-model绑定成item.isTest,on-change是传入item这样就能使每个循环出来的数据独立,当初就在想,在data里初始化的话,根本不知道有多少个循环出来的表格,一度认为这个无法实现

总体来说iview比较简洁(相比element),风格和设计也很不错.因为是全局引入,iview比较大