ant design for vue 选项卡组件需求实现
具体是需要是,点击菜单列表,选项就增加一个选项卡,并且显示出路由的内容。1.选用持新增和关闭选项卡,大致大的解决思路:在menu组件中获取点击事件,保存{ title:选项卡名称, conten:这个可以用<router-view>代替,key:'选择一个作为key’}这一步只用的click事件需要传回一个title:subItem.authName,和作用key使用的subItem.
·
用到的是 Ant Design Vue 1.78版本
1.选用持新增和关闭选项卡,大致大的解决思路:在menu组件中获取点击事件,保存
<!-- 二级菜单 -->
<a-menu-item
@click="getTitle(subItem.authName, subItem.path)"
v-for="subItem in item.children"
:key="subItem.path"
:index="subItem.id"
>
{{ subItem.authName }}
</a-menu-item>
2.选项卡组件
<!-- 选项卡 -->
<a-tabs
v-model="activeKey"
hide-add
type="editable-card"
@edit="onEdit"
@change="tabClick"
>
<a-tab-pane
v-for="pane in panes"
:key="pane.key"
:tab="pane.title"
:closable="pane.closable"
:path="pane.path"
>
<router-view></router-view>
</a-tab-pane>
</a-tabs>
3.准备数据
4.第一步的方法getTitle获取title、path
getTitle(title_name, menu_path) {
//获取到数据后定义一条pane对象(一个选项卡的数据)
var addpane = {
path: "/" + menu_path,
key: menu_path,
title: title_name,
};
//避免新增tabsArr中存在的选项卡,title_name是增加的选项卡标题,如果增加的标题存在tabsArr数组中就return出去。
if (!this.tabsArr.includes(title_name)) {
this.add(addpane);//如果没问题就调用增加选项卡的功能
return;
}
this.$message.info("选项卡已经打开");
},
5.按照需求:不能重复选项卡、选项卡不能大于10个
//以下代码都是 methods:
//选项卡
callback(key) {
// console.log(key);
},
onEdit(targetKey, action) {
this[action](targetKey);
// console.log("targetKey", targetKey);
// console.log("action", action);
},
add(addpane) {
const panes = this.panes;
// console.log(addpane.title, addpane.path, addpane.key);
//这里修改长度就能限制选项卡的个数,功能需求有需要控制增加的选项卡数量不能超过9。
if (this.tabsArr.length < 9) {
this.tabsArr.push(addpane.title);//把选项卡的标题,增加到tabsArr(增加的选项卡标题数组)
this.$router.push(addpane.path);//路由导航到标题的路径
this.activeKey = addpane.key;//激活当前 tab 面板的key,用addpane.key
panes.push(addpane);//把数据增加到pannes数组中
this.panes = panes;
return;
}
this.$message.error("选项卡不能超过10个");
},
remove(targetKey) {
//删除选项卡激活的事件,会把增加的addpane.key传过来。
let activeKey = this.activeKey;
let lastIndex;
this.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.panes.filter((pane) => pane.key !== targetKey);
if (panes.length && activeKey === targetKey) {
if (lastIndex >= 0) {
activeKey = panes[lastIndex].key;
} else {
activeKey = panes[0].key;
}
}
this.deleteKey(targetKey);//调用这个函数,该选项卡的title_name从到tabsArr数组删除
this.panes = panes;
this.activeKey = activeKey;
},
//删除tabsArr中的targetKey元素
deleteKey(title_name) {
this.tabsArr = this.tabsArr.filter((item) => {
return item !== title_name;
});
},
//选项卡点击的事件,每次切换都路由到选项卡的路径,这里的e穿回来是activeKey,之前我已经把路径当做pane.key
tabClick(e){
console.log('触发了该事件',e)
this.$router.push(e)
},
更多推荐
已为社区贡献1条内容
所有评论(0)