使用vue v-for循环渲染dom，做了拖拽，现在只能一个元素有背景，如何是被拖拽的被释放的地方的元素都有样式？

Question

题目描述

需求：设置数据库表外键，几个表字段任意推拽，被拖得和被释放的背景变色

题目来源及自己的思路

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<div class="set-waijian">

<div class="waijian">
  <el-row :gutter="100">
    <el-col :span="4"  v-for="schema,index in  tmpData">
      <div class="waijian-box" >
        <div class="waijian-tit">
          <span>{{schema.name}}</span>
        </div>
        <div class="waijian-body">
          <div>
            <template v-if="schema.columns.length == 0">
                <span>空</span>
              </template>
              <template >
                <span ref="span"  @click="setColor(item,i,index)" :accessKey="i" @dragstart="dragstart($event,schema,item,i,index)"
                @drop="drop($event,schema,item,i,index)"
                 onselectstart="return false;"
                 @dragover.prevent
                        draggable="true" v-for="item,i in schema.columns" :class="{color:(index==indexPrevP && i==indexPrev)}">
                  {{item.name &nbsp;&nbsp;}}<br> 
                </span>
              </template> 
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  
</div>

</div>
</template>
dragstart(event,data,item,i,index) {

  console.log(111)
  console.log(event);
  // console.log(data);
  console.log(item);
 this.indexPrevP = index
   this.indexPrev = i
},
setColor(data,i,index) {
  console.log(data,i,index);

   this.indexPrevP = index
   this.indexPrev = i
 
  
},
drop(event,data,item,i,index) {
  console.log(event);
  // console.log(data);
  console.log(item);
  this.indexPrevP = index
   this.indexPrev = i
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

不用索引，用名字实现
<template>
<div class="set-waijian">

<div class="waijian">
  <el-row :gutter="100">
    <el-col :span="4"  v-for="schema,index in  tmpData">
      <div class="waijian-box" >
        <div class="waijian-tit">
          <span>{{schema.name}}</span>
        </div>
        <div class="waijian-body">
          <div>
            <template v-if="schema.columns.length == 0">
                <span>空</span>
              </template>
              <template >
                <span ref="span"  @click="setColor(item,i,index)" :accessKey="i" @dragstart="dragstart($event,schema,item,i,index)"
                @drop="drop($event,schema,item,i,index)"
                 onselectstart="return false;"
                 @dragover.prevent
                        draggable="true" v-for="item,i in schema.columns" :class="{color:colorItem[schema.name+'.'+item.name] }">
                  {{item.name &nbsp;&nbsp;}}<br> 
                </span>
              </template> 
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  
</div>

</div>
</template>

<script>
import Api from "@/libs/api";
import { mapState } from "vuex";
export default {

data () {

return {
  data:[],tmpData:[],
 
  indexPrev:1,
  indexPrevP:1,
  colorItem:{},
  color:[]
}

},

methods: {

 loadData() {
  console.log("这是书数据");
  console.log(this.count);
  // this.loading = true;
  var fieldType = [];
  //存储外键字段
    var WaijianFieldType = []
   let fenkuFormWjian =JSON.parse(localStorage.getItem('fenkuFormWjian')) 
   if (fenkuFormWjian != null) {
      for (let i = 0; i < fenkuFormWjian.length; i++) {
     
     WaijianFieldType.push(fenkuFormWjian[i].split('.')[1])
   }
   }
  
   console.log('外键字段'+ WaijianFieldType)
  console.log("树可用类型");
  console.log(localStorage.getItem("charStyle"));
  let charStyle = localStorage.getItem("charStyle");
  console.log(charStyle);
  if (charStyle == "HASH") {
    fieldType = [
      "bit",
      "bool",
      "tinyint",
      "mediumint",
      "smallint",
      "float",
      "bigint",
      "double",
      "decimal",
      "char",
      "int",
      "varchar",
      "tinytext",
      "text",
      "mediumtext",
      "longtext",
      "tinyblob",
      "blob",
      "mediumblob",
      "longblob",
      "date",
      "datetime",
      "timestamp",
      "time",
      "year"
    ];
    console.log(fieldType);
  }
  if (charStyle == "RANGE" || charStyle == "LIST") {
    fieldType = [
      "bit",
      "bool",
      "int",
      "tinyint",
      "mediumint",
      "smallint",
      "float",
      "bigint",
      "double",
      "decimal",
      "char",
      "varchar",
      "tinytext",
      "text",
      "mediumtext",
      "longtext",
      "tinyblob",
      "blob",
      "mediumblob",
      "longblob"
    ];
    console.log(fieldType);
  }
  console.log(localStorage.getItem("sqlNum"));
  let fenbiaoTreeNum = localStorage.getItem("fenbiaoTreeNum");
  let fenkuZiduan = localStorage.getItem("fenkuZiduan");
  let fenkuZiduanLast = localStorage.getItem("fenkuZiduanLast");
  let subStyle = localStorage.getItem("subStyle");
  console.log("分表分布方式" + subStyle);
  console.log("分库作用字段" + fenkuZiduanLast);
  if (localStorage.getItem("sqlNum") == 2) {
    let data = JSON.parse(localStorage.getItem("schemaData"));
    console.log(data);
    // let treeData = [];
    // for (let i = 0; i < data.length; i++) {
    //   let tableItem = {
    //     label: data[i].name,
    //     disabled:
    //       fenbiaoTreeNum == 2 && data[i].name !== fenkuZiduan
    //         ? true
    //         : false,
    //     children: []
    //   };

    //   console.log(tableItem);
    //   for (const tableKey of data[i].columns) {
    //     const columnItem = {
    //       label: tableKey.name,
    //       //查找检索某个元素                          //字符串转换为小写
    //       disabled: fieldType.includes(tableKey.type.desc.toLowerCase()) 
    //         ? false
    //         : true
    //     };
    //      if (tableItem.label !== fenkuZiduan && fenbiaoTreeNum == 2) {
    //             columnItem.disabled = true;
    //           }
    //     if (subStyle == "RANGE" || subStyle == "LIST") {
    //       if (columnItem.label == fenkuZiduanLast) {
    //         columnItem.disabled = true;
    //       }
    //       if ( WaijianFieldType.includes(columnItem.label)) {
    //         columnItem.disabled = true;
    //       }
    //     }
    //     console.log(columnItem);
    //     tableItem.children.push(columnItem);
    //   }
    //   treeData.push(tableItem);
    // }
    // this.data = treeData;
  } else if (localStorage.getItem("sqlNum") == 1) {
    //去除工单编号
    let orderNum = localStorage.getItem("orderNum");
    console.log(orderNum);
    Api.newRule
      .getSchema(orderNum)
      .then(res => {
        if (res.data.resCode == 10000) {
          this.tmpData = res.data.data;
          console.log(res.data.data);
          // console.log(this.tmpData);
          // let treeData = [];
          // for (let i = 0; i < this.tmpData.length; i++) {
          //   let tableItem = {
          //     label: this.tmpData[i].name,
          //     disabled:
          //       fenbiaoTreeNum == 2 && this.tmpData[i].name !== fenkuZiduan
          //         ? true
          //         : false,
          //     children: []
          //   };
          //   console.log(tableItem);
          //   for (const tableKey of this.tmpData[i].columns) {
          //     const columnItem = {
          //       label: tableKey.name,
          //       //查找检索某个元素                          //字符串转换为小写
          //       disabled: fieldType.includes(
          //         tableKey.type.desc.toLowerCase()
          //       )
          //         ? false
          //         : true
          //     };
          //     if (tableItem.label !== fenkuZiduan && fenbiaoTreeNum == 2) {
          //       columnItem.disabled = true;
          //     }
          //     if (subStyle == "RANGE" || subStyle == "LIST") {
          //       if (columnItem.label == fenkuZiduanLast) {
          //         columnItem.disabled = true;
          //       }
          //       if ( WaijianFieldType.includes(columnItem.label)) {
          //         columnItem.disabled = true;
          //       }
          //     }
          //     console.log(columnItem);
          //     tableItem.children.push(columnItem);
          //   }
          //   treeData.push(tableItem);
          // }
          // this.data = treeData;
        }
      })
      .catch(res => {});
  }
  localStorage.getItem("sqlNum");

  console.log(this.tmpData);
  // let fenbiaoTreeNum = localStorage.getItem("fenbiaoTreeNum");
  //  localStorage.setItem("fenbiaoTreeNum",0);
  // let fenkuZiduan = localStorage.getItem("fenkuZiduan");
  //  localStorage.setItem("fenkuZiduan",0);
  // let data = this.count

  // this.loading = false;
},
dragstart(event,data,item,i,index) {
  console.log(111)
  console.log(event);
  console.log(data.name);
  console.log(item);
 this.indexPrevP = index
   this.indexPrev = i
  let nameOder = data.name+'.'+item.name
  console.log(nameOder);
   this.$set(this.colorItem,nameOder,true)
   console.log(this.colorItem)
  //  this.$delete( this.colorItem,'inetlivepush.id' )
  // for (const key in this.colorItem) {
  //  console.log(key);
  //  if (key == nameOder) {
     
  //  }else {
  //    this.$delete( this.colorItem,key )
  //  }
  // }
    for (const key in this.colorItem) {
   
   if (key == nameOder) {
      this.$set(this.colorItem,key,true)
   }else if (key.split('.')[0] == nameOder.split('.')[0]) {
    
     if (key.split('.')[1] != nameOder.split('.')[1]) {
      
       this.$delete( this.colorItem,key )
     }else {

     }
   } 
  }
 
},
setColor(data,i,index) {
  console.log(data,i,index);

   this.indexPrevP = index
   this.indexPrev = i
 
  
},
drop(event,data,item,i,index) {
  console.log(event);
  console.log(data.name);
  console.log(item);
  this.indexPrevP = index
   this.indexPrev = i
    let nameOder = data.name+'.'+item.name
   this.$set(this.colorItem,nameOder,true)
   console.log(this.colorItem);
   for (const key in this.colorItem) {
   
   if (key == nameOder) {
      this.$set(this.colorItem,key,true)
   }else if (key.split('.')[0] == nameOder.split('.')[0]) {
    
     if (key.split('.')[1] != nameOder.split('.')[1]) {
      
       this.$delete( this.colorItem,key )
     }else {

     }
   } 
  }
}

},

created () {

this.loadData()

}
}
</script>

<style lang='scss' scopd>
.set-waijian {
overflow: hidden;
.waijian {

overflow: hidden;
.waijian-box {
  // width: 200px;
  text-align: center;
  border: 2px solid #eee;
  box-sizing: border-box;
  .waijian-tit {
    background-color: #90b6e1;
    line-height: 40px;
    // font-size: 24px;
  }
  .waijian-body {
    span {
      display: block;
      padding: 5px 0;
      // width: 196px;
      border: 1px solid #eee;
      // background-color: pink;
    }
  }
}

}
}
.color {
background-color: pink;
}
</style>