vue 根据标签名称的首字母过滤，并排序显示，同时实现标签的增删改查

最新推荐文章于 2024-03-06 16:52:41 发布

qian96

最新推荐文章于 2024-03-06 16:52:41 发布

阅读量420

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qian96/article/details/116155392

版权

本文介绍了如何使用Vue.js实现一个功能，即根据标签名称的首字母进行过滤和排序显示，同时提供了标签的添加、删除、修改和查询操作。通过示例代码展示了HTML页面结构、CSS样式和JavaScript实现细节。

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

根据标签名称的首字母过滤，并排序显示，同时实现标签的增删改查

实现效果如图
在这里插入图片描述

html页面

<el-tab-pane label="标签管理" name="second">
          <div class="banner_b">
            <div class="icon_red_tag"></div>
            <div class="classfity_tag">商品标签</div>
            <el-button
              type="danger"
              class="add_label_btn"
              @click="dialogVisible = true"
              >新增标签</el-button
            >
          </div>
          <div class="block_c">
            <ul
              class="lable_f"
              v-for="(item, index) in initialdata"
              :key="index"
            >
              <li>
                <div class="initials">{
  { item }}</div>
                <div style="display:flex;width:auto">
                  <div
                    class="lablebox"
                    v-for="(lable, index) in goodsLabelName.filter(
                      (term) => term.labelNameLetter == item
                    )"
                    :key="index"
                  >
                    <p>{
  { lable.goodsLabelName }}</p>
                    <i
                      class="el-icon-edit-outline edit_icon"
                      @click="everyIndex"
                      :data-index="lable.goodsLabelId"
                    ></i>
                    <i
                      class="el-icon-delete delete_icon"
                      @click="deleteBtn"
                      :data-index="lable.goodsLabelId"
                    ></i>