vue在完成推拽之后如何不让重复

img


当前是空白值,我进行拖拽之后

img


当出现重复的时候如何提示重复了,并不让出现


<template xmlns="http://www.w3.org/1999/html">


  <div style="border: 1px solid red">
    <el-container>
      <el-aside class="el-aside1" width="1350px">
        <el-container>
          <el-header class="el-header1" height="200px"style="border: 1px solid royalblue">
            <div   class="topdiv" @drop="drop($event,'item')" @dragover="allowDrop($event)"
                   style="border: 1px solid red;width: 900px;height: 190px;">div>
            <el-button size="small" type="primary"  @click="chaxun"
            >查询el-button>
          el-header>
          <el-main>
            <el-table
              :data="tableData"
              style="width:540px"
              :header-cell-style="{textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }"    >
              <el-table-column
                prop="datat"
                width="180px"
                label="日期">
              el-table-column>
              <el-table-column
                prop="shuju_a"
                width="180px"
                label="测试">
              el-table-column>
              <el-table-column
                prop="shuju_b"
                width="180px"
                label="测试">
              el-table-column>
            el-table>
          el-main>
        el-container>
      el-aside>
      <el-container>
        <el-main class="el-main1">
          <table >
            <tr>
              <td  >
                <div style="float: left" class="innerdiv" draggable="true"  @dragstart="drag($event)">
                  时间格式: <el-input  v-model="shuju_a" placeholder="请输入内容" style="width: 200px;">el-input>
                div>
              td>
            tr>
            <tr>
              <td>
                <div style="float: left" class="innerdiv1" draggable="true"  @dragstart="drag($event)">
                  狗蛋2: <el-input  v-model="shuju_a2" placeholder="请输入内容" style="width: 200px;">el-input>
                div>
              td>
            tr>
            <tr>
              <td>
                <div style="float: left" class="innerdiv1" draggable="true"  @dragstart="drag($event)">
                  2132133: <el-input  v-model="shuju_a3" placeholder="请输入内容" style="width: 200px;">el-input>
                div>
              td>
            tr>
            <tr>
              <td>
                <div style="float: left" class="innerdiv1" draggable="true"  @dragstart="drag($event)">
                  hahhhahhahhahah: <el-input  v-model="shuju_a4" placeholder="请输入内容" style="width: 200px;">el-input>
                div>
              td>
            tr>
          table>
        el-main>
      el-container>
    el-container>

  div>
template>

<script>
import FileSaver from 'file-saver'
const Exceljs=require("exceljs")
export default {
  name: "Login",
  data() {
    return {
      tableData:[],
      shuju_a: "",
      shuju_b:''
    }
  },
  methods: {
    drag(ev, id) {
      console.log("拖动", id);
      this.id = id;
      this.dom = ev.currentTarget.cloneNode(true);
      console.log(this.dom);
    },
    // 允许放下拖拽
    allowDrop(ev) {
      ev.preventDefault();
    },
    // 放下事件
    drop(ev, item) {
      console.log("放下", item);
      console.log(ev);
      ev.preventDefault();
      let treeNode = ev.target;
      if (treeNode) {
        treeNode.appendChild(this.dom);
      }
    },

    chaxun() {
          console.log(this.shuju_a)
      this.$axios.get('http://localhost:8899/api/xun', {
        params: {
          shuju_a: this.shuju_a,
          shuju_b: this.shuju_b
        }
      }).then(resp => {
        this.tableData = resp.data
      }).catch(err => {
        console.log('操作失败' + err)
      })

    },
  }
}
script>

<style scoped>
.topdiv{
  float: left;
}

.el-header1{
  background-color: #E9EEF3;
  color: #333;
}
.el-aside1 {
  background-color: #E9EEF3;
  color: #333;
  height: 800px;
}

.el-main1 {
  background-color: #B3C0D1;
  color: #333;
  width: 300px;
}





style>

img


你在这个函数里面添加逻辑判断下就可以了呀,div里有没有准备拖动进来的元素的cls,存在就不让托