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比较大
