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

参考Element官方例子：

Tag标签

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

1、页面引入

        <el-dialog  :visible.sync="newsSetVisible" >
                <el-form :inline="true"  class="demo-form-inline">
                <el-tag
                        :key="tag"
                        v-for="tag in dynamicTags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                    {{tag}}
                </el-tag>
                <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增类型</el-button>
            </el-form>
        </el-dialog>

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: "新增类型不能为空值"
          });
        }

      },