做拖拽的标签遇到的问题总结

标签：总结 drop 标签 元素 threeLevel item item01 拖拽

 这种表格 只有2个 一个左边一个右边，使用自定义表头

    <el-table-column>
            <template #header>
              <div class="box_right_table_header_left">
                <span>XX名称</span>
              </div>
            </template>
            <template #default="scope">
              <div class="box_right_table_header_left_txt">
                <div>{{ scope.row.threeLevel }}</div>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.tagDesc ? scope.row.tagDesc : '暂无数据'"
                  placement="top-start"
                >
                  <img src="@/assets/images/tips.png" alt="" />
                </el-tooltip>
                <img
                  src="@/assets/images/add.png"
                  @click="goToCustomr(scope.row)"
                  alt=""
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template #header>
              <div class="box_right_table_header_right">
                <span>使用次数</span>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="使用的次数"
                  placement="top-start"
                >
                  <img src="@/assets/images/tips.png" alt="" />
                </el-tooltip>
              </div>
            </template>
            <template #default="scope">
              <div style="display: flex; justify-content: flex-end">
                <div style="text-align: center; width: 100px">
                  {{ scope.row.tagTimes }}
                </div>
              </div>
            </template>
          </el-table-column>

　　

 

点击这个加号跳转到其他页面

import { useRouter } from "vue-router";   const router = useRouter();

路由传参 query不行 url上能看到参数，params也不行，这个需要在路由规则中提前声明参数名，参数名前不要丢失冒号

（如果配置了参数必须传递，但是我这个目标页面可以通过点击事件跳转过去【要传参】，也可以菜单跳转过去【这里不用传参】，so不行），

如果解构使用query/params对象，由于是直接从响应式数据中解构，变量会丢失响应式，需要使用toRefs。

const { query } = toRefs(route)

 

 

 

最终找到这个state传参，既不暴露参数，也能获取，也不用配置路由
vue-router 4.1.4弃用params传参方式，使用history.state方式替代，并且解决了vue2中params刷新数据丢失问题
（参考：https://blog.csdn.net/qq_23858785/article/details/135423102）

const goToCustomr = (row) => {
  // 隐藏参数 params有bug 传递过去获取不到参数 so 用state
  let state = {
    copyData: JSON.stringify(row),
    isCopy: "false",
  };
  // 跳转到自定义圈选页面
  router.push({
    path: "/main/customSelect/customSelect",
    state,
  });
};

　　

  <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.tagDesc ? scope.row.tagDesc : '暂无数据'"
                  placement="top-start"
                >
                  <img src="@/assets/images/tips.png" alt="" />
   </el-tooltip>

 

 

 

threeLevelsShowMore（循环数据-自己加的字段）等于threeLevels

          <div class="label_tags">

           
                 <template v-if="scope.row.threeLevels&&scope.row.threeLevels.length<5">
                    <div class="repeat" v-for="(item,index) in scope.row.threeLevels" :key="item+index">{{item}}</div>
                 </template>
                 <template v-else>
                    <div class="repeat" v-for="(item,index) in scope.row.threeLevelsShowMore.slice(0,4)" :key="item+index">{{item}}</div>
                    <el-tooltip placement="top-start" :content="scope.row.threeLevels.join(', ')">
                      <div class="repeat">{{ `+${scope.row.threeLevels.length - 4}` }}</div>
                    </el-tooltip>
                  
                  </template>
              </div>

　　

defaultActive.value = "1-1";//默认选中的菜单是第一个菜单下的第一个二级菜单（如果我从其他页面跳转过来，就得变）     拖拽实现

 

左边的列表安卓可以往右边拖拽

draggable="true" 就可以拖

  <div
                draggable="true"
                v-for="(item, index) in tableDataAll.tableData"
                :key="index"
                class="three_menu_son"
                @dragstart="dragstart($event, item)"
              >
                <el-tooltip
                  :disabled="isShowTooltipThreeLevel"
                  :content="item.threeLevel"
                  placement="top-end"
                  popper-class="table-body-tooltip"
                >
                  <div
                    ref="threeLevelRefParents"
                    class="title"
                    @mouseover="onMouseOverThreeLevel(index)"
                  >
                    <span ref="threeLevelRef">{{ item.threeLevel }}</span>
                  </div>
                </el-tooltip>
                <el-tooltip
                  :disabled="isShowTooltipThreeLevelTagDesc"
                  :content="item.tagDesc"
                  placement="top-end"
                  popper-class="table-body-tooltip"
                >
                  <div
                    class="txt"
                    @mouseover="onMouseThreeLevelTagDescRef(index)"
                  >
                    <span ref="threeLevelTagDescRef">{{ item.tagDesc }}</span>
                  </div>
                </el-tooltip>

                <!-- <div class="title" v-tooltip="item.threeLevel">
                {{ item.threeLevel }}
              </div> -->
                <!-- <div class="txt">{{ item.tagDesc }}</div> -->

                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="按住鼠标可拖拽"
                  placement="top-start"
                >
                  <img
                    draggable="false"
                    src="@/assets/images/drag.png"
                    alt=""
                  />
                </el-tooltip>
              </div>

 

// 开始拖拽
const dragstart = (e: any, data: any) => {
  console.log(data.threeLevel, "start"); // 拖拽传输的数据
  // argType   是否有具体属性 0 无 1 有  (有属性则展开)
  if(data.argType=='1'){
    data.isOpen=true
  }
  e.dataTransfer.setData("customData", JSON.stringify(data));
};

　

 

dragstart：开始拖元素触发，作用于拖拽元素
dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素
dragover：当元素拖动到drop元素上时触发，作用于目标元素
drop：当元素放下到drop元素触发，作用于目标元素
dragleave ：当元素离开drop元素时触发，作用于目标元素
drag：每次元素被拖动时会触发，作用于目标元素
dragend：放开拖动元素时触发，作用于目标元素
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_45658814/article/details/114685839

   <div @dragover.prevent @drop="drop" class="box_list common_scrollbar">
          <div
            class="box_list_repeat"
            v-for="(item, index) in draggableData.draggableDataArray"
            :key="index"
          >
            <div class="box_list_repeat_title">
              <div class="left">
                <div class="left_txt">{{ item.threeLevel }}</div>

                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="item.tagDesc ? item.tagDesc : '暂无数据'"
                  placement="top-start"
                >
                  <img src="@/assets/images/tips.png" alt="" />
                </el-tooltip>
              </div>
              <!-- 展开标签 删除标签 -->
              <div class="right">
                <div class="delete" @click="deleteTags(item)">
                  <img src="@/assets/images/delete.png" alt="" />
                  <span>删除标签</span>
                </div>
                <!-- item.argType   是否有参数 0 无 1 有 -->
                <div
                  class="tages"
                  v-if="item.argType === '1'"
                  @click="switchOpenOrClose(item.isOpen, index)"
                >
                  <img
                    v-if="!item.isOpen"
                    src="@/assets/images/open.png"
                    alt=""
                  />
                  <img v-else src="@/assets/images/close.png" alt="" />
                  <span>{{ item.isOpen ? "收起" : "展开" }}标签</span>
                </div>
              </div>
            </div>
            <!-- 具体属性 -->
            <div class="box_list_repeat_content" v-if="item.isOpen">
              <!-- "tagInfo": "是#否", //单选和复选框内容-->
              <div
                v-for="(itemxx, indexxx) in item.dappMusicHybqTagDetailVos"
                :key="indexxx"
                style="margin-bottom: 20px"
              >
                <div
                  style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 30px;
                  "
                >
                  <div style="width: 200px;font-size:14px;color:#2c3e50b0">{{ itemxx.tagTitle }}</div>
                  <!-- eqSelect": 0, //是否有等于或者不等于选择框 0-没有 1-有 -->
                  <div v-if="itemxx.eqSelect === 1">
                    <el-select
                      v-model="itemxx.eqSelectType"
                      placeholder="请选择"
                      clearable
                      size="default"
                      style="width: 100px;color:#2c3e50b0"
                    >
                      <el-option label="=" :value="1"></el-option>
                      <el-option label="≠" :value="0"></el-option>
                    </el-select>
                  </div>
                  <!-- "tagType": "0", //标签类型 0 单选 1 复选 2-省份地市 -->
                  <div v-if="itemxx.tagType === '0'" style="margin-left: 20px">
                    <el-radio-group v-model="itemxx.tagInfoTypeSingle">
                      <el-radio
                        style="font-size:14px;color:#2c3e50b0"
                        @update:modelValue="handleRadioChange()"
                        :key="indexY"
                        v-for="(itemY, indexY) in itemxx.tagInfoArray"
                        :label="itemY"
                        >
                        <span style="font-size:14px;color:#2c3e50b0">{{ itemY }}</span>
                        </el-radio
                      >
                    </el-radio-group>
                  </div>
                  <div v-if="itemxx.tagType === '1'" style="margin-left: 20px">
                    <el-checkbox-group v-model="itemxx.tagInfoTypeNoSingle">
                      <el-checkbox
                      
                        :key="indexY"
                        v-for="(itemY, indexY) in itemxx.tagInfoArray"
                        :label="itemY"
                        name="type"
                      >
                        <span style="font-size:14px;color:#2c3e50b0">{{ itemY }}</span>
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-if="itemxx.tagType === '2'" class="mycascader">
                    <!-- 全国 -->
                    <el-cascader
                      :props="{ checkStrictly: false, multiple: true }"
                      ref="cascaderRef"
                      style="width: 300px"
                      @change="handleChangeCascader"
                      v-model="itemxx.proviceAndCity"
                      :options="areaArray.areaArray"
                      :show-all-levels="false"
                      :collapse-tags="true"
                      clearable
                    ></el-cascader>
                  </div>
                </div>
                <div
                  v-if="itemxx.tagType === '2' && itemxx.provInfo"
                  class="tgs"
                >
                  <div
                    class="tagsitem"
                    v-for="tag in itemxx.provInfo.split(',')"
                    :key="tag"
                  >
                    {{ tag }}
                    <img
                      @click="deleteProvice(tag)"
                      class="imgitem"
                      src="@/assets/images/closed.png"
                      alt=""
                    />
                  </div>
                  <div
                    class="tagsitem"
                    v-for="tag in itemxx.repeatCityName.split(',')"
                    :key="tag"
                  >
                    {{ tag }}
                    <img
                      @click="deleteCity(tag)"
                      class="imgitem"
                      src="@/assets/images/closed.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

　　

// 结束拖拽
const drop = (e: any) => {
  if (draggableData.draggableDataArray.length === 0) {
    draggableData.draggableDataArray.push(
      JSON.parse(e.dataTransfer.getData("customData"))
    );
  } else {
    // 检查是否已存在于数组中
    let exists = draggableData.draggableDataArray.some(
      (item) =>
        item.threeLevel ===
        JSON.parse(e.dataTransfer.getData("customData")).threeLevel
    );
    // 如果对象不存在，则添加到数组中
    if (!exists) {
      draggableData.draggableDataArray.push(
        JSON.parse(e.dataTransfer.getData("customData"))
      );
    }
  }

  // 添加isOpen:false字段  控制展开或收起
  draggableData.draggableDataArray.forEach((item,index) => {
    item.isOpen = item.isOpen ? item.isOpen : false;
    item.tagRelation = andOrOr.value; //交集and     并集传or
    item.poolOrderType = 0; //运算池展示顺序(本期写死 只有一个运算池)
    item.tagOrderType = index; //标签展示顺序(拖过来的标签顺序 0 1 2 重0开始)
    if (item.dappMusicHybqTagDetailVos) {
      item.dappMusicHybqTagDetailVos.forEach((item01,index01) => {
        // 需要传递给后端接口的字段
        item01.eqSelectType = item01.eqSelectType ? item01.eqSelectType : null; //用户选择的选择框类型 0-不等于 1-等于
        item01.tagInfoType = item01.tagInfoType ? item01.tagInfoType : ""; //单选和复选框选择的内容(最终都是这个字段传递过去 多选就拼#)
        item01.tagInfoTypeSingle = item01.tagInfoTypeSingle
          ? item01.tagInfoTypeSingle
          : null; //单选选择的内容
        item01.tagInfoTypeNoSingle = item01.tagInfoTypeNoSingle
          ? item01.tagInfoTypeNoSingle
          : []; //复选框选择的内容
        item01.proviceAndCity = item01.proviceAndCity
          ? item01.proviceAndCity
          : []; //省份城市的内容

        item01.provInfo = item01.provInfo ? item01.provInfo : null; ////省份信息
        item01.cityInfo = item01.cityInfo ? item01.cityInfo : null; //城市
        item01.paramRelation = "and"; //与下个参数的关系(and  or)没有下个参数就传空
        item01.poolOrderType = 0; //运算池展示顺序(本期写死 只有一个运算池)
        item01.paramOrderType = index01; //参数展示顺序(就是属性的展示顺序 eg:第一个是单选框  第二个是复选框  重0开始)
        if (item01.tagInfo) {
          item01.tagInfoArray = item01.tagInfo.split("#");
        }
      });
    }
  });
  console.log(draggableData.draggableDataArray, "end"); // 拖拽传输的数据
};

　　

 

   

标签：总结,drop,标签,元素,threeLevel,item,item01,拖拽
From： https://www.cnblogs.com/myfirstboke/p/18103333