使用el-tag和el-select组件实现标签的增删

第一步

点击按钮，弹出博客所拥有的标签列表的气泡

效果图

第二步

选择标签列表中的标签进行添加

效果图

第三步

实现标签的移除

效果图

 

页面编写

            
              
              

                添加
                
                
                  
                  
                
              
              

                
                  {{ item.blogTagName }}
                
              
            
            

逻辑实现 

 

/**
 * 封装查询标签
 */
const searchTags = (blogId) => {
  axios.blog_findTagByBlogId({
    blogId: blogId
  }).then(res => {
    if (res.data.code == 200) {
      blog_tagList.list = res.data.data
    }
  })
}
/**
 * 查询标签
 */
const handTags = (index, row) => {
  searchTags(row.blogId)
}
/**
 * 添加标签
 */
const handleAddTag = (index, row) => {
  axios.blog_addTag({
    blogId: row.blogId,
    blogTagId: choseTagId.value
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success('添加成功')
      searchTags(row.blogId)
    }
  })
}
/**
 * 删除标签
 */
const handleCloseTag = (row, blogTagId) => {
  axios.blog_deleteTag({
    blogId: row.blogId,
    blogTagId: blogTagId,
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success('删除成功')
      searchTags(row.blogId)
    }
  })
}