iview 使用總結

vue+iview 開發後臺系統問題總結

項目參考了iview-admin

tags

• 用了keep-alive 包裹 router-view,頁面進行緩存點擊tag可切換,不會從新渲染
• 在特定頁面好比詳情頁須要每次刷新的時候,添加watch $route 進行相關的刷新,致使了另一個問題,最初跳轉時用的 params傳參,刷新參數就沒了,特改成query傳參.
• 涉及到關閉tag,點擊tag,等多個問題,用vuex存儲tags數據,並作了最大限制超過8個就splice(0,1)

menu

主要是openName 這個props問題,即展開的menu name,採起的在根組件watch $route 根據router 的相應name 改變openName

form

表單有相應的驗證問題,在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

項目用了不少table, iview 的table用render渲染列,不像element,模板比較簡潔

<Table :columns="columns" :data="showData" size="small"></Table>

1. 表格裏數據有點擊操做,致使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
                        }
                      });
                    }
                  }
                },
                "查看"
              );

1. exportCsv()方法,導出csv文件,iview 並未對render函數作處理,致使導出的數據沒有,只能寫不少代碼處理columns 列數據,以及data行數據,自定義導出,這個問題以爲該給iview團隊提提,

問題2,給循環處理的table,導出數據

<div class="childList" v-for="(item,index) in reportChild" :key="index">
      <p class="title">
        ({{item.length > 0 && item[0].parentDisplayName ? item[0].parentDisplayName : ''}}) 下級列表
        <Button type="ghost" @click="exportdata(index)">導出數據</Button>
      </p>
      <Table :columns="columns1" :data="item" size="small" :ref="'table'+index"></Table>
    </div>

綁定的ref加上index,已得到當前表格,說到這個循環,想起另一問題

<div class="childList" v-for="(item,index) in agentChild" :key="index">
      <p class="title">
        ({{item.childItem.length > 0 && item.childItem[0].parentDisplayName ? item.childItem[0].parentDisplayName : parentNameChild}}) 下級列表
        <RadioGroup v-model="item.isTest" v-if="level==0" class="radioGroup" type="button" @on-change='changeChildType(item)'>
          <Radio label="正式"></Radio>
          <Radio label="測試"></Radio>
          <Radio label="所有"></Radio>
        </RadioGroup>
      </p>
      <Table :columns="columns1" :data="item.childItem" size="small"></Table>
    </div>

給循環的table 綁定RadioGroup v-model綁定成item.isTest,on-change是傳入item這樣就能使每一個循環出來的數據獨立,當初就在想,在data裏初始化的話,根本不知道有多少個循環出來的表格,一度認爲這個沒法實現

總結

整體來講iview比較簡潔(相比element),風格和設計也很不錯.由於是全局引入,iview比較大