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

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,模板比較簡潔

表格里數據有點擊操作,導致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比較大

總結

以上是生活随笔為你收集整理的php如何直接使用iview,iview 使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。