vue标签菜单动态添加

1、定义Vuex

• addRegionTabs中接收两个参数status、data
  • status：表示某种状态或条件
  • data：数据

• 将数据放到status中定义的regionTabslist进行存储
• 利用sessionStorage方法将数据进行存储

	  // 添加地区标签
	  addRegionTabs(state,data){
		state.regionTabslist= data;
		sessionStorage.setItem('regionTabslist',JSON.stringify(data));
	  },

• 在status中获取sessionStorage的值进行存放

  state: {
	  // 地区标签列表
	  regionTabslist: sessionStorage.getItem('regionTabslist')||[],
  },

• 完整代码

import Vue from 'vue' // 引入Vue实例
import Vuex from 'vuex' // 引入Vuex
import { postDcm } from '@/utils/getInter' // 引入封装的请求方法
import router from '@/router' // 引入路由

Vue.use(Vuex) // 将Vuex在Vue中使用

// 创建了一个新的Vuex Store实例，并将其导出。这个Store实例包含了应用的所有状态管理逻辑
export default new Vuex.Store({
  state: {
	  // 地区标签列表
	  regionTabslist: sessionStorage.getItem('regionTabslist')||[],
  },
  getters: {
  },
  mutations: {
	  // 添加地区标签
	  addRegionTabs(state,data){
		state.regionTabslist= data;
		sessionStorage.setItem('regionTabslist',JSON.stringify(data));
	  },
  },
  actions: {
  },
  modules: {
  }
})

2、在需要的页面调用actions方法

• 通过调用this.$store.commit方法来进行数据传递

searchGdpGrowth() {
   this.$store.commit("addRegionTabs", this.regionTagList);
   this.currentPage = 1;
   this.begindata();
},

3、定义动态标签组件

<template>
  <div class="flex_content">
    <div style="width: 57vw">
      <div class="tagcontent">
        <div class="taginner">
          <!-- 遍历 tabslist 数组，生成每个标签 -->
          <div
            class="dis_inline line-1 cus tag_item t_center"
            v-for="(item, index) in tabslist"
            :key="index"
          >
            <!-- 显示标签的名称 -->
            <span class="dis_inline m-r-10">{{ item.unit }}</span>
            <!-- 标签关闭按钮 -->
            <div class="dis_inline close_icon">
              <i
                class="el-icon-circle-close f-c-666"
                @click.stop="closetabs(item, index)"
              ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      regionTagList: [], // 地区标签列表
    };
  },
  computed: {
    // 计算属性，获取 Vuex Store 中的 regionTabslist
    tabslist() {
      if (Array.isArray(this.$store.state.regionTabslist)) {
        return this.$store.state.regionTabslist;
      } else {
        return Array.isArray(this.$store.state.regionTabslist);
      }
    },
  },
  methods: {
    // 关闭标签的方法
    closetabs(item, n) {
      // 从 tabslist 数组中移除标签
      this.tabslist.splice(n, 1);
      // 更新 Vuex Store 中的 regionTabslist
      this.$store.commit("addRegionTabs", this.tabslist);
      // 触发 toDadCondition 事件，传递关闭的标签
      this.$emit("toDadCondition", item);
    },
  },
};
</script>

<style scoped>
.tag_item.tabs_active {
    margin-top: 5px;
    padding-top: 5px;
padding-bottom: 6px;
background: #f6f7fb;
color: #2345c3;
border-bottom: 2px solid #2345c3;
border-top: none;
border-left: none;
border-right: none;
margin-bottom: 0;
border-radius: 6px 6px 0 0;
}
.icon_active {
color: #fff;
}
.tagcontent {
border-radius: 10px 10px 0px 0px;
background: #fff;
z-index: 9;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}

.tagcontent::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-track {
background-color: rgba(70, 166, 255, 0.1);
display: none;
}
::-webkit-scrollbar-thumb {
background-color: rgba(70, 166, 255, 0.4);
border: 2px solid transparent;
border-radius: 6px;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
}

.tagcontentMain {
border-radius: 10px 10px 0px 0px;
width: 100%;
background: #fff;
box-shadow: 0px 1px 17px 0px rgba(38, 69, 140, 0.17);
z-index: 9;
}
.close_icon {
width: 14px;
height: 14px;
}
.taginner {
padding: 0 20px 0px;
}

.taginnerMain {
padding: 0 20px 0px;
}
.tag_item {
padding: 6px 14px 6px 14px;
border: 1px solid #ecf5ff;
border-radius: 6px;
margin-right: 5px;
margin-top: 5px;
background-color: #ecf5ff;
color: #55a8ff;
}

.tag_item_main {
padding: 6px 8px 6px 14px;
border: 1px solid #dddddd;
border-radius: 6px;
margin-right: 14px;
background-color: #fff;
}
.el-divider--vertical {
margin: 0;
}
.dividerleft {
position: absolute;
left: 0;
top: 14px;
}
.divider {
position: absolute;
right: 0;
top: 14px;
}
.tag_name {
max-width: 56px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.f-c-666 {
color: #55a8ff;
}

.condition {
font-size: 15px;
margin: 5px 10px 0px 20px;
}

/deep/ .el-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 15px 0;
}

.drowDownItem {
border: 1px solid #dddddd;
padding: 6px 14px 6px 14px;
border-radius: 6px;
margin-right: 5px;
margin-top: 5px;
background-color: #fff;
color: #55a8ff;
cursor: pointer;
}

.drowDownNone{
padding: 6px 14px 6px 14px;
border-radius: 6px;
margin-right: 5px;
margin-top: 5px;
background-color: #fff;
color: #55a8ff;
cursor: pointer;
}
</style>