iview---tabs标签页限制最长与最少长度

小桥流水人家丶

已于 2023-03-27 10:42:51 修改

阅读量226

点赞数

文章标签： view design javascript 前端 vue.js

于 2023-03-22 18:56:16 首次发布

本文链接：https://blog.csdn.net/xu568110526/article/details/129716696

版权

本文介绍了如何在iView UI组件库中使用Tabs标签页，并详细讲解了如何限制标签页的最长显示数量和设置最少显示的标签页，通过JavaScript和Vue.js实现动态管理标签页的显示效果。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <Button @click="handAdd">添加</Button>
    <Tabs type="card" closable @on-click="tabClick" @on-tab-remove="moveClick">
      <Tab-pane
        v-for="(item, index) in tabList"
        :name="item"
        :label="item"
        :key="item"
        :disabled="flag"
        >{
  { item }}</Tab-pane
      >
    </Tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: "许舟舟",
      ind: 0,
      tabList: ["tab1", "tab2"],
      flag: false,
    };
  },
  created() {},
  computed: {},
  methods: {
    
    handAdd() {
      this.flag = false;
      if (this.tabList.length > 4) {
        this.$Message.error("最多添加5项");
        return;
      }
      this.ind++;
      this.tabList.push("标签