添加标签（vue3）

喵喵酱仔__

已于 2024-12-17 15:06:39 修改

阅读量284

点赞数 2

分类专栏： # vue3一些简单的组件文章标签： vue.js javascript 前端

于 2024-12-17 14:58:09 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38210427/article/details/144533763

版权

vue3一些简单的组件专栏收录该内容

17 篇文章

订阅专栏

点击添加按钮：最多添加5个

注意：

不只可以el-form 进行校验，也可以对单个el-form-item 进行校验

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法-优快云博客

el-form 里边有el-form-item ，el-form-item里边有新的校验

可以对el-form-item 进行单个的校验

   <el-form-item label="展示标签：" :prop="EFormPropKeys.TAGS">
            <div class="display-label">
              <el-link
                v-if="!disabledForm" :icon="Plus" :underline="false" type="primary"
                v-throttle:click="{ time: 500, handler: handleAddTag }"
                >添加标签</el-link
              >
              <div v-if="createForm[EFormPropKeys.TAGS].length > 0" class="tag-list">
                <div
                  v-for="(item, index) in createForm[EFormPropKeys.TAGS]"
                  :key="index"
                  class="tag-item"
                >
                  <el-form-item
                    label="标签名称"
                    label-width="82px"
                    :prop="`${EFormPropKeys.TAGS}.${index}.labelName`"
                    :rules="tagRules.labelName"
                  >
                    <el-input v-model="item.labelName" maxlength="10" />
                  </el-form-item>
                  <el-form-item
                    label="颜色"
                    label-width="60px"
                    required
                    :prop="`${EFormPropKeys.TAGS}.${index}.colorCode`"
                    :rules="tagRules.colorCode"
                  >
                    <el-color-picker v-model="item.colorCode" show-alpha />
                    <el-icon class="delete-icon" v-if="!disabledForm" @click="removeTag(index)"
                      ><Delete
                    /></el-icon>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form-item>



 /**
   * 添加标签
   */
  const handleAddTag = () => {
    if (createForm[EFormPropKeys.TAGS].length >= 5) {
      ElMessage.warning("最多添加5个标签")
      return
    }
    createForm[EFormPropKeys.TAGS]?.push({
      labelName: "",
      colorCode: ""
    })
  }

const createForm = reactive({
     [EFormPropKeys.NAME]: "",
    [EFormPropKeys.TAGS]: [],
})  
 
 const tagRules = reactive({
    labelName: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
    colorCode: [{ required: true, message: "请选择颜色", trigger: "blur" }]
  })