iView/View UI tabs可关闭标签，跳跃关闭会关闭后续所有标签问题。

最新推荐文章于 2024-01-08 14:08:53 发布

茫茫沧海一云生

最新推荐文章于 2024-01-08 14:08:53 发布

阅读量583

点赞数 1

分类专栏： VUE UI设计前台开发文章标签： view design vue javascript ui

本文链接：https://blog.csdn.net/cjs5525/article/details/130084816

版权

前台开发同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

VUE

5 篇文章 1 订阅

订阅专栏

UI设计

4 篇文章 0 订阅

订阅专栏

序言

在使用iview2.0/View UI设计页面时发现需要使用tabs标签进行切换，但是在标签for循环内添加关闭按钮会给用户一种不是同级的感觉，所以打算采用官网的关闭方法，发现点击中间某个标签关闭会联通中间到结尾所有的标签都关闭的bug。

0.手动添加按钮方法

<Tabs ref="taskBeforeTabsSel" type="card">
  <TabPane v-for="(item, index) in taskBeforeStepData" :key="index" :label="'步骤'+(index+1)">
    <Button type="error" icon=" iconfont icon-trash" @click="delBeforeStep(index)">删除当前步骤</Button>
    <!-- 内容 -->
  </TabPane>
</Tabs>

// 作业前删除步骤
delBeforeStep(index) {
  this.taskBeforeStepData.splice(index, 1)
  if (this.taskBeforeStepData.length === index) {
    this.$refs.taskBeforeTabsSel.activeKey = index-1
    this.$refs.taskBeforeTabsSel.focusedKey = index-1
  }
  this.$forceUpdate() // 强制刷新
},

效果：

因为添加步骤的内部还有一个3级表单，给人的感觉很容易误解为删除的不是上面的步骤而是下面的3级表单行。

1.结合官方代码问题

<Tabs ref="taskBeforeTabsSel" type="card" closable @on-tab-remove="delBeforeStep">
  <TabPane v-for="(item, index) in taskBeforeStepData" :key="index" :label="'步骤'+(index+1)">
    <!-- 内容 -->
  </TabPane>
</Tabs>

js内容同上不变

效果：

但实际打印参数却发现参数还在！并且还有白屏问题！

2.寻找解决方案

在度娘的帮助下在思否的一篇文章给我提供了迷津，机票。

在结合他文章后大佬给出答案，我做了尝试，发现并没有改观，但是题主却采纳了，经过仔细代码对比，我发现虽然都是在原标签dom节点进行关闭，但是关闭的方法却不一样。

这里采用的是:before-remove，在官网api确实有该属性，但没有任何案例！坑啊！

这个方法 + closable + 前面大佬给的return Promise.reject() = 问题解决！

3.最终代码

<Tabs ref="taskBeforeTabsSel" type="card" closable :before-remove="delBeforeStep">
  <TabPane v-for="(item, index) in taskBeforeStepData" :key="index" :label="'步骤'+(index+1)">
    <Button type="error" icon=" iconfont icon-trash" @click="delBeforeStep(index)">删除当前步骤</Button>
    <!-- 内容 -->
  </TabPane>
</Tabs>

// 作业前删除步骤
delBeforeStep(index) {
  this.taskBeforeStepData.splice(index, 1)
  if (this.taskBeforeStepData.length === index) {
    this.$refs.taskBeforeTabsSel.activeKey = index-1
    this.$refs.taskBeforeTabsSel.focusedKey = index-1
  }
  this.$forceUpdate() // 强制刷新
  return Promise.reject()
},

效果：