怎么用element写一个可以编辑和删除的导航条,还有可以新增和批量删除导航条的功能
时间: 2023-05-17 15:07:01 浏览: 139
您可以使用 element-ui 中的 el-menu 组件来创建导航条,同时使用 el-dialog 组件来实现新增和批量删除导航条的功能。具体实现方法可以参考以下代码:
```html
<template>
<div>
<el-menu :default-active="activeIndex" mode="horizontal">
<el-menu-item v-for="(item, index) in navList" :key="index" :index="index">
{{ item }}
<i class="el-icon-close" @click.stop="removeNav(index)"></i>
</el-menu-item>
<el-menu-item>
<i class="el-icon-plus" @click="addNav"></i>
</el-menu-item>
</el-menu>
<el-dialog title="新增导航" :visible.sync="dialogVisible">
<el-form :model="navForm" label-width="80px">
<el-form-item label="导航名称">
<el-input v-model="navForm.name"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addNavHandler">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '0',
navList: ['导航1', '导航2', '导航3'],
dialogVisible: false,
navForm: {
name: ''
}
}
},
methods: {
addNav() {
this.dialogVisible = true
},
addNavHandler() {
this.navList.push(this.navForm.name)
this.dialogVisible = false
},
removeNav(index) {
this.navList.splice(index, 1)
}
}
}
</script>
```
在这个示例中,我们使用了 el-menu 组件来创建导航条,使用 el-menu-item 组件来显示导航项,并在每个导航项后面添加了一个删除按钮。同时,我们还使用了 el-dialog 组件来实现新增导航的功能,使用 el-form 组件来收集用户输入的导航名称。在用户点击确认按钮后,我们将新的导航名称添加到导航列表中,并关闭对话框。在用户点击删除按钮后,我们将对应的导航项从导航列表中删除。