本人第一次着手一个完整的vue项目,从2019.12开始至2020.7结束,中间由于各种需求的的变动,真正的开发时间只有3个月。
总结一些我遇到的一些问题:
1.同一个路由但是参数不同(例如 page?id=1与page?id=2),无法刷新页面?
解决方法:利用<router-view>的key属性,这两个路由的$route.fullPath
并不一样, 所以组件被强制不复用, 相关钩子加载顺序为:beforeRouteUpdate => created => mounted
2.iview中的树形控件(Tree)如何渲染后端返回的数据?
解决方法:如下代码
<Row>
<Col span="12">
<Tree :data="roleList" ref="tree" show-checkbox :render="renderContent" @on-check-change="deptSelect"></Tree>
</Col>
</Row>
// 一级
getTree (tree = []) {
let arr = [];
if (tree.length !== 0) {
tree.forEach(item => {
let obj = {};
obj.role_type = item.role_type;
obj.expand = true
if(item.scope_roles != null ){ // 地市移动 客户经理
if(item.roles != null){ // 供应商
obj.children = this.getTreeSon(item.roles);
}else {
obj.children = this.getTreeSub(item.scope_roles);
}
}
if(item.scope_roles == null && item.roles != null) { // 省移动 或者供应商
obj.children = this.getTreeSon(item.roles);
}
arr.push(obj);
});
}
return arr
},
// 二级
getTreeSub (tree = []) {
let arr = [];
if (tree.length !== 0) {
tree.forEach(item => {
let obj = {};
obj.expand = true
obj.area_id = item.area_id;
obj.area_name = item.area_name
obj.scope = item.scope; // 其他你想要添加的属性
obj.scope_id = item.scope_id; // 其他你想要添加的属性
obj.scope_name = item.scope_name
if(item.roles!=null) {
obj.children = this.getTreeSon(item.roles);
}
if(item.roles == null) {
obj.children = [];
}
arr.push(obj);
});
}
return arr
},
// 三级
getTreeSon (tree = []) {
let arr = [];
if (tree.length !== 0) {
tree.forEach(item => {
let obj = {};
obj.checked = item.checked;
obj.id = item.id
obj.role_name = item.role_name; // 其他你想要添加的属性
obj.children = [];
arr.push(obj);
if(item.checked == '1'){
this.role_ids.push(item.id)
}
});
}
return arr
},
// 控件渲染
renderContent (h, { root, node, data }) {
if(data.role_type != null){// 大类
let s = ''
if(data.role_type == 1){
s = '省移动'
}
if(data.role_type == 2){
s = '地市移动'
}
if(data.role_type == 3){
s = '移动客户经理'
}
if(data.role_type == 4){
s = '供应商'
}
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span',[
h('Icon', {
style: {
marginRight: '5px'
}
}),
h('span', s)
]),
]);
}
if(data.scope_name != null){ //地市移动
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span',[
h('Icon', {
style: {
marginRight: '5px'
}
}),
h('span', data.scope_name)
]),
]);
}
if(data.role_name != null){ // 省移动
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span',[
h('Icon', {
style: {
marginRight: '5px'
}
}),
h('span', data.role_name)
]),
]);
}
},
// 角色获取
getChooseRole(datas) {
this.$http.defaults.headers.common['token'] = this.token;
this.$http.post(URL_CONFIG.UrlConfig.userChooseRole,datas)
.then(res => {
if (res.data.error_code == '0') {
this.roleList = this.getTree(res.data.data)
} else {
this.$Message.error(res.data.message);
}
}).catch(error => {
console.log(error)
})
},
// 点击角色
deptSelect(data){
let selectArr = this.$refs.tree.getCheckedNodes();
console.log(this.$refs.tree.getCheckedNodes());
this.allCheck = data
this.role_ids = []
this.checkList = []
for(let i = 0;i<data.length;i++){
if(data[i].id){
this.role_ids.push(data[i].id)
this.checkList.push(data[i])
}
}
},
3.iview中的复选框控件(Checkbox) 如何渲染后端返回的数据?
解决如下代码:
<div class="con-item" v-for="(item,index) in schoolList" :key="index">
<div style="font-size: 16px;color: #0C9EFE">{{item.area_name}}</div>
<div v-for="(itemSub,indexSub) in item.districts" :key="indexSub">
<div class="item-name">{{itemSub.district_name}}
<Checkbox
:value="itemSub.checkAll"
@on-change="handleCheckAll(index,indexSub,itemSub)">
</Checkbox>
</div>
<div class="item-input">
<CheckboxGroup v-model="itemSub.checkAllGroup" @on-change="checkAllGroupChange(itemSub,indexSub)">
<Checkbox :label="itemSon.school_id" v-for="(itemSon,indexSon) in itemSub.schools" :key="indexSon" >{{itemSon.school_name}}</Checkbox>
</CheckboxGroup>
</div>
</div>
</div>
handleCheckAll (index,indexSub,itemSub) {
itemSub.checkAll = !itemSub.checkAll;
if (itemSub.checkAll) {
for(let j=0;j<itemSub.schools.length;j++){
itemSub.schools[j].checked = 1
itemSub.checkAllGroup.push(itemSub.schools[j].school_id)
}
} else {
itemSub.checkAllGroup = [];
}
},
checkAllGroupChange (itemSub,indexSub) {
if (itemSub.checkAllGroup.length === itemSub.schools.length ) {
itemSub.checkAll = true;
} else if (itemSub.checkAllGroup.length != itemSub.schools.length && itemSub.checkAllGroup.length > 0) {
itemSub.checkAll = false;
} else {
itemSub.checkAll = false;
}
},
// 获取学校列表
getSchool(id) {
this.$http.defaults.headers.common['token'] = this.token;
let datas = {
id:id
}
this.$http.post(URL_CONFIG.UrlConfig.getSchoolList,datas)
.then(res => {
if (res.data.error_code == '0') {
this.show = false
for(let i=0;i<res.data.data.length;i++){
for(let j=0;j<res.data.data[i].districts.length;j++){
res.data.data[i].districts[j].checkAll = false
res.data.data[i].districts[j].checkAllGroup = []
for(let z=0;z<res.data.data[i].districts[j].schools.length;z++){
if(res.data.data[i].districts[j].schools[z].checked == 1){
res.data.data[i].districts[j].checkAllGroup.push(res.data.data[i].districts[j].schools[z].school_id)
}
if(res.data.data[i].districts[j].checkAllGroup.length == res.data.data[i].districts[j].schools.length){
res.data.data[i].districts[j].checkAll = true
}
}
}
}
this.schoolList = res.data.data
} else {
this.$Message.error(res.data.message);
}
}).catch(error => {
console.log(error)
})
},