在项目开发过程中用到Element plus tabs的一个使用,我们请求列表接口,然后展现页面,现在有个移除效果,我们根据文档知道移除事件tabremove 这个时候我们可以使用@tabremove用于自定义事件去处理,我们需要给后太传递参数,这里主要使用的是el-tab-pane中的name,name就是我们绑定的值
//--------------------------------页面
<el-tabs
v-if="!state.Showtabs"
v-model="activeName"
class="demo-tabs"
:closable="state.data.closable"
:type="state.data.card === true ? 'card' : null"
@tab-click="handleClick"
@tab-remove="removeTab"
>
<div v-if="!state.Showtabs">
<div v-for="(item, index) in state.data.list" :key="index">
<el-tab-pane :label="item.id" :name="item" />
</div>
</div>
</el-tabs>
//----------------------------方法
const activeName = ref(0)
const handleClick = () => {
nextTick(() => {
console.log(activeName.value.id)
})
}
以上呢是一个简单的删除,拿取id,还请大佬们指正,我不是很会写文档
这里呢state.list是个数组
以上不成功试试下面这个方法
<el-tabs
v-if="!state.Showtabs"
v-model="activeName"
class="demo-tabs"
:closable="state.data.closable"
:type="state.data.card === true ? 'card' : null"
@tab-click="handleClick(state.data.list[activeName])"
@tab-remove="removeTab(state.data.list[activeName])"
>
<div v-if="!state.Showtabs">
<div v-for="(item, index) in state.data.list" :key="index">
<el-tab-pane :label="item.id" :name="item.id" />
</div>
</div>
</el-tabs>
const handleClick = (val: any) => {
emit('handleclick', val.id)
}
const removeTab = (val: any) => {
emit('removetab', val.id)
}