php如何直接使用iview,iview 使用总结
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 使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： rust windows 交叉编译_树莓
- 下一篇： mysql 组合索引 or_mysql索