使用饿了么tag标签实现选择展示和删除

最近的需求是需要在下拉列表中选择城市然后渲染

这里的实现使用了饿了吗的下拉菜单实现多选和tag标签进行循环展示 代码如下 下拉列表部分

<el-form-item
            prop="cityList"
            :rules="[
              { required: true, message: '地区不能为空', trigger: 'blur' },
            ]"
          >
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                城市选择<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in city" :key="item.cityId" :command="item">{{ item.cityName }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            //closable 会使tag标签出现删除样式 close事件处理就可以了
            已选:  <el-tag v-for="item in citytext" :key="item.cityId" closable size="medium" style="text-align:center" type="danger" @close="handleClose(item.cityId)">{{ item.cityName }}</el-tag>
          </el-form-item>
         

需要的data数据主要是这三个 city,citytext ,NewDiscount.citylist,注意数据类型

方法如下

  // 城市选择
    handleCommand(command) {
      // 获取到id
      console.log(command)
      // 去重
      if (this.NewDiscount.cityList.indexOf(command.cityId) === -1) {
        // console.log(this.addlist.labels)
        this.NewDiscount.cityList.push(command.cityId)
        // 直接全存然后编辑labelName
        this.citytext.push(command)
      } else {
        this.$notify({
          title: '没办法',
          message: '不可以重复选择城市',
          type: 'warning'
        })
      }
    },
    // 标签删除事件
    handleClose(id) {
      // 删除提交表单的已选
      // 先找到索引
      const i = this.NewDiscount.cityList.indexOf(id)
      // 删除
      this.NewDiscount.cityList.splice(i, 1)
      console.log(this.NewDiscount.cityList)
      // 删除渲染的已选标签
      this.citytext.splice(i, 1)
      console.log(this.citytext)
    }