TabBar案例，实现商品Tag标签添加功能

视频↓

lihesheng.1iq.cn/TabBarpush.…

需求：

自定义数据结构，将数据渲染到页面中，标签部分按效果实现添加标签功能，删除当前行数据。路由正确切换。

思路：

首先定义数据存放在data中，渲染到页面，头部部分实现头部导航，底部通过定位实现底部导
航，点击不同内容实现路由跳转，Tag标签部分，点击按钮修改flag值让input框显示失去焦点
通过修改值隐藏。回车通过push添加，删除通过splice删除。

数据↓

arr: [
        {
          name: '天美意夏季专柜同款金色布女鞋6YF18BT6',
          price: 199,
          tag: [
            '秋冬', '春夏'
          ],
          flag: false
        },
        {
          name: '奥休斯(all shoes) 冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋子',
          price: 199,
          tag: [
            '秋冬', '春夏'
          ],
          flag: false
        },
        {
          name: '初语秋冬新款毛衣女 套头宽松针织衫简约插肩袖上衣',
          price: 199,
          tag: [
            '秋冬', '春夏'
          ],
          flag: false
        }

html结构

 <div class="top">TabBar案例</div>
    <table border="1">
      <tr>
        <td>#</td>
        <td>商品名称</td>
        <td>价格</td>
        <td>标签</td>
        <td>操作</td>
      </tr>
      <tr v-for="val, i in arr" :key="i">
        <td> {{ i + 1 }} </td>
        <td> {{ val.name }} </td>
        <td> {{ val.price }} </td>
        <td>
          <el-button type="success" @click="tggle(val)" v-if="val.flag == false">+Tag</el-button>
          <input type="text" v-focus value="" @blur="Lose(i)" @keyup.enter="Lose(i)" v-model="value" v-else>
          <p v-for="it, index in val.tag" :key="index">
            <el-tag type="success">{{ it }}</el-tag>
          </p>
        </td>
        <td>
          <el-button type="danger" @click="arr.splice(i,1)">删除</el-button>
        </td>
      </tr>
    </table>
    <footerIndex></footerIndex>

逻辑代码

import footerIndex from '@/components/footer.vue'
export default {
  name: 'homeIndex',
  components:{
    footerIndex
  },
  data() {
    return {
      arr: [
        {
          name: '天美意夏季专柜同款金色布女鞋6YF18BT6',
          price: 199,
          tag: [
            '秋冬', '春夏'
          ],
          flag: false
        },
        {
          name: '奥休斯(all shoes) 冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋子',
          price: 199,
          tag: [
            '秋冬', '春夏'
          ],
          flag: false
        },
        {
          name: '初语秋冬新款毛衣女 套头宽松针织衫简约插肩袖上衣',
          price: 199,
          tag: [
            '秋冬', '春夏'
          ],
          flag: false
        }
      ],
      value: ''
    }
  },
  methods: {
    // 点击button显示输入框
    tggle(val) {
      val.flag = true
    },
    Lose(i) {
      if (this.value !== '') {
        this.arr[i].tag.push(this.value)
      }
      this.arr[i].flag = false
      this.value=''
    }
  }
}
</script>

css样式

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 100px;
  background-color: rgb(101, 165, 165);
  font-size: 26px;
  text-align: center;
  line-height: 100px;
  color: aliceblue;
}

td {
  width: 300px;
}
</style>

您的点赞是我更文的最大动力, 点赞数越多就会更有动力更新，欢迎留言！！！