摘要：開(kāi)發(fā)后臺(tái)系統(tǒng)問(wèn)題總結(jié)項(xiàng)目參考了用了包裹頁(yè)面進(jìn)行緩存點(diǎn)擊可切換不會(huì)重新渲染在特定頁(yè)面比如詳情頁(yè)需要每次刷新的時(shí)候添加進(jìn)行相關(guān)的刷新導(dǎo)致了另外一個(gè)問(wèn)題最初跳轉(zhuǎn)時(shí)用的傳參刷新參數(shù)就沒(méi)了特改為傳參涉及到關(guān)閉點(diǎn)擊等多個(gè)問(wèn)題用存儲(chǔ)數(shù)據(jù)并做了最大限

vue+iview 開(kāi)發(fā)后臺(tái)系統(tǒng)問(wèn)題總結(jié)

項(xiàng)目參考了iview-admin

用了keep-alive 包裹 router-view,頁(yè)面進(jìn)行緩存點(diǎn)擊tag可切換,不會(huì)重新渲染

在特定頁(yè)面比如詳情頁(yè)需要每次刷新的時(shí)候,添加watch $route 進(jìn)行相關(guān)的刷新,導(dǎo)致了另外一個(gè)問(wèn)題,最初跳轉(zhuǎn)時(shí)用的 params傳參,刷新參數(shù)就沒(méi)了,特改為query傳參.

涉及到關(guān)閉tag,點(diǎn)擊tag,等多個(gè)問(wèn)題,用vuex存儲(chǔ)tags數(shù)據(jù),并做了最大限制超過(guò)8個(gè)就splice(0,1)

主要是openName 這個(gè)props問(wèn)題,即展開(kāi)的menu name,采取的在根組件watch $route 根據(jù)router 的相應(yīng)name 改變openName

表單有相應(yīng)的驗(yàn)證問(wèn)題,在FormItem 添加相應(yīng)的ref 然后在腳本里自定義驗(yàn)證規(guī)則

   const validatesuffix = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("標(biāo)識(shí)不能為空"));
      } else {
        let testReg = /^[a-zA-Z][a-zA-Z0-9]{1,5}$/;
        if (!testReg.test(value)) {
          callback(new Error("2~6位,只能輸入英文數(shù)字(字母開(kāi)頭)"));
        } else {
          checkExit({
            suffix: { role: "10", suffix: value }
          }).then(res => {
            if (res.code == 0) {
              if (res.payload == true) {
                callback();
              } else {
                callback(new Error("標(biāo)識(shí)不可用,請(qǐng)重新輸入"));
              }
            }
          });
        }
      }
    };

項(xiàng)目用了很多table, iview 的table用render渲染列,不像element,模板比較簡(jiǎn)潔

表格里數(shù)據(jù)有點(diǎn)擊操作,導(dǎo)致columns寫很多

簡(jiǎn)單情況如下:

 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);
            }
          }

復(fù)雜情況: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()方法,導(dǎo)出csv文件,iview 并未對(duì)render函數(shù)做處理,導(dǎo)致導(dǎo)出的數(shù)據(jù)沒(méi)有,只能寫很多代碼處理columns 列數(shù)據(jù),以及data行數(shù)據(jù),自定義導(dǎo)出,這個(gè)問(wèn)題覺(jué)得該給iview團(tuán)隊(duì)提提,

問(wèn)題2,給循環(huán)處理的table,導(dǎo)出數(shù)據(jù)

      

        ({{item.length > 0 && item[0].parentDisplayName ? item[0].parentDisplayName : ""}}) 下級(jí)列表
        導(dǎo)出數(shù)據(jù)
      
      
    

綁定的ref加上index,已獲得當(dāng)前表格,說(shuō)到這個(gè)循環(huán),想起另外一問(wèn)題

 

      

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

給循環(huán)的table 綁定RadioGroup v-model綁定成item.isTest,on-change是傳入item這樣就能使每個(gè)循環(huán)出來(lái)的數(shù)據(jù)獨(dú)立,當(dāng)初就在想,在data里初始化的話,根本不知道有多少個(gè)循環(huán)出來(lái)的表格,一度認(rèn)為這個(gè)無(wú)法實(shí)現(xiàn)

總體來(lái)說(shuō)iview比較簡(jiǎn)潔(相比element),風(fēng)格和設(shè)計(jì)也很不錯(cuò).因?yàn)槭侨忠?iview比較大