利用Element的Tag标签简单实现类型管理

参考Element官方例子：

Tag标签

对于类型这个标识字段，对应一个单独表，也确实没有多余字段，我不想用form表单，然后直接参考了例子就拿来用了

1、页面引入

        
                
                
                    {{tag}}
                
                
                
                + 新增类型
            
        

2、监听相关事件并调用接口

      handleClose(tag){
        this.$confirm("为避免误操作,请确定是否删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.axios
            .post("./ttp/server/app/delNewsType?name=" + tag)
            .then(res => {
              if (res.data.status) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message
                });
              }
            });
        });
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      getNewsType(){
        this.axios
          .post("./ttp/server/app/getNewsTypeList")
          .then(res => {
            this.inputVisible = false;
            this.inputValue = '';
            this.dynamicTags = res.data.data;
          });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          let i = this.dynamicTags.indexOf(inputValue);
          if (i>-1){
            this.$message({
              type: "error",
              message: "该类型已存在"
            });
            return ;
          }
          this.axios
            .post("./ttp/server/app/addNewsType?name=" + inputValue)
            .then(res => {
              if (res.data.status) {
                this.dynamicTags.push(inputValue);
                this.inputVisible = false;
                this.inputValue = '';
              }else {
                this.$message({
                  type: "error",
                  message: res.data.message
                });
              }
            });

        }else {
          this.$message({
            type: "error",
            message: "新增类型不能为空值"
          });
        }

      },