表单内动态删减标签

父组件

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-table
        :data="list"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column label="操作" align="center" header-align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="openEdit(scope.row)"
              >修改大类</el-link
            >
            <el-link type="primary" @click="scbig(scope.row)">删除大类</el-link>
            <el-link type="primary" @click="xiaoclass(scope.row)"
              >编辑小类</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑小类弹框 -->
      <el-dialog title="编辑小类" :visible.sync="bjx" width="30%">
        <el-form v-model="small">
          <el-form-item style="margin:10px">
            <div class="biao" v-for="item in small" :key="item.id">
              <el-input
                style="width: 20%;"
                placeholder="小类名称"
                v-model="item.name"
                clearable
              />
              <el-input
                style="width: 40%;margin-left:10px"
                placeholder="请输入小类备注"
                v-model="item.remark"
                clearable
              />
              <el-input
                style="width: 20%;margin-left:10px"
                placeholder="输入单位"
                v-model="item.unit"
                clearable
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 62%;"
              plain
              type="primary"
              @click="xz"
              :disabled="this.jy"
              >添加小类</el-button
            >
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="bjx = false">取消添加</el-button>
          <el-button type="primary" @click="qeren">确认添加</el-button>
        </span>
      </el-dialog>
    </el-card>
    <RoleEdit :data="current" @querylist="querylist" :visible.sync="showEdit" />
  </div>
</template>

<script>
import RoleEdit from "./edit";
export default {
  components: { RoleEdit },
  data() {
    return {
      list: [],
      small: [],
      av: "",
      bjx: false,
      jy: false,
      // 是否显示编辑弹窗
      showEdit: false,
      // 当前编辑数据
      current: null
    };
  },
  created() {
    this.querylist();
  },
  methods: {
    /* 显示编辑 */
    openEdit(row) {
      console.log(row);
      this.current = row;
      this.showEdit = true;
    },
    // 分割
    hanshu(value) {
      if (value) {
        let zhi = value.split(",");
        return zhi;
      }
    },
    // 获取全部
    querylist() {
      this.$http.post("?s=Manage.Setting_RecycleCategory.Get", {}).then(res => {
        console.log(res, "回收");
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex.length) {
          return {
            rowspan: rowIndex.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1
          };
        }
      }
    },
    // 编辑小类
    qeren() {
      this.$http
        .post("?s=Manage.Setting_RecycleCategory.AddSubCategory", {
          pid: this.av,
          name: this.small[this.small.length - 1].name,
          remark: this.small[this.small.length - 1].remark,
          unit: this.small[this.small.length - 1].unit
        })
        .then(res => {
          console.log(res, "增加");
          if (res.data.code == 200) {
            this.$message({ type: "success", message: "成功" });
            this.bjx = false;
            this.jy = false;
            this.querylist();
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    xiaoclass(e) {
      this.small = [];
      console.log(e);
      this.av = e.id;
      this.bjx = true;
      if (e.sub) {
        this.small = e.sub;
      } else {
        e["sub"] = [];
      }
      console.log(this.small, "day");
    },
    // 新增
    xz() {
      if (this.small.length > 0) {
        this.small.push({});
        this.jy = true;
      } else {
        this.small.push({});
        this.jy = true;
      }
    }
  }
};
</script>

子组件

<!-- 角色编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate ? '修改大类' : '添加大类'"
    :visible="visible"
    width="400px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-form-item label="大类名称:">
        <el-input v-model="form.name" placeholder="请输入大类名称" clearable />
      </el-form-item>

      <el-form-item label="大类图标:">
        <el-upload
          class="tu"
          ref="$qiniu_img"
          :action="'http://upload-z2.qiniup.com'"
          name="file"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :limit="1"
          list-type="picture-card"
          :data="info"
          v-model="form.img"
          :on-exceed="onExceed"
          accept="image/*"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <img width="100%" v-if="isUpdate" :src="data.img" alt="" />
      </el-form-item>
      <!-- ---------------------------------------------------- -->
      <el-tag
        v-for="(item, index) in infoaaaa"
        :key="index"
        closable
        :disable-transitions="false"
        @close="handleClose(item)"
      >
        {{ item }}
      </el-tag>

      <!--  -->
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="form.value"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput"
        >+ New Tag</el-button
      >
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "RoleEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        name: [{ required: true, message: "请输入广告标题", trigger: "blur" }]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      info: {
        key: "",
        token: "",
        host: ""
      },
      infoaaaa: [],
      inputVisible: false
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.infoaaaa = [];
        this.form = Object.assign({}, this.data);
        if (this.form.value) {
          this.infoaaaa = this.form.value.split(",");
          this.form.value = "";
        }
        this.isUpdate = true;
      } else {
        this.form = {};
        this.infoaaaa = [];
        this.isUpdate = false;
      }
    }
  },
  mounted() {
    this.form = Object.assign({}, this.data, {
      value: ""
    });
  },
  methods: {
    hanshu(value) {
      if (value) {
        let zhi = value.split(",");
        return zhi;
      }
    },
    // 七流云上传前
    fileName(name) {
      var date = new Date();
      return (
        date.getFullYear() +
        "/" +
        (date.getMonth() + 1) +
        "/" +
        date.getDate() +
        "/" +
        this.$util.uuid(16) +
        name.substring(name.lastIndexOf("."))
      );
    },
    onExceed() {},
    beforeUpload(file) {
      let that = this;
      that.info.key = that.fileName(file.name);
      return new Promise((resolve, reject) => {
        that.$http.get("/?s=Manage.Upload.QiniuToken").then(res => {
          console.log(res);
          if (res.data.code == 200) {
            that.info.token = res.data.data.token; // token凭证
            that.info.host = res.data.data.host; // 上传域名
            return resolve(res.data.data);
          } else {
            that.$message.error(res.data.data.msg);
            return reject(false);
          }
        });
      });
    },

    // 七流云上传后的钩子
    handleSuccess(res, file) {
      this.form.img = this.info.host + res.key;
    },
    /* 保存编辑 */
    save() {
      // this.form.slide_type = this.slide_type;
      this.form.value = this.infoaaaa.join(",");
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$http
            .post("?s=Manage.Setting_RecycleCategory.EditCategory", this.form)
            .then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({ type: "success", message: "成功" });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("querylist");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
      this.$emit("querylist");
      console.log(this.$emit("update:visible", value));
    },
    // 删除
    handleClose(e) {
      console.log(e, "zhes");
      this.infoaaaa.splice(this.infoaaaa.indexOf(e), 1);
    },
    // 点击添加
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 失去焦点。点击
    handleInputConfirm() {
      let value = this.form.value;
      if (value) {
        this.infoaaaa.push(value);
      }
      this.inputVisible = false;
      this.form.value = "";
    }
  }
};
</script>