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>
- 表格里数据有点击操纵,致使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,导出数据
<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比较大