網(wǎng)站做幾個(gè)域名比較好,關(guān)鍵詞競價(jià)排名是什么意思,果凍影視傳媒有限公司,python免費(fèi)下載安裝遇見情況#xff1a;現(xiàn)在的數(shù)據(jù)層層疊疊#xff0c;有的要求不僅簡單的單個(gè)盒子拖拽#xff0c;而且要求#xff1a;父盒子里面的子盒子也要能拖拽。實(shí)現(xiàn)要求#xff1a;拖拽父輸入框只能與屬于父輸入框的交換位置#xff1b;拖拽子輸入框只能與子輸入框交換位置實(shí)現(xiàn)圖片…遇見情況現(xiàn)在的數(shù)據(jù)層層疊疊有的要求不僅簡單的單個(gè)盒子拖拽而且要求父盒子里面的子盒子也要能拖拽。實(shí)現(xiàn)要求拖拽父輸入框只能與屬于父輸入框的交換位置拖拽子輸入框只能與子輸入框交換位置實(shí)現(xiàn)圖片完整代碼實(shí)現(xiàn)template div classcustom no-select el-form :modelformtwo refformRef label-widthauto stylemax-width: 475px draggable v-modelformtwo.dimensionalInfoList item-keyid handle.drag-handle animation300 endonEnd template #item{ element: group, index: groupIndex } div classgroup_card !-- 父維度 -- div classfather_box span classiconfont icon-hengxian drag-handle/span el-form-item :propdimensionalInfoList. groupIndex .content :rules{ required: true, message: 父維度不能為空, trigger: blur, } el-input v-modelgroup.content placeholder請(qǐng)輸入父分析維度 classdesc__content / /el-form-item SisternodeOutlined classicon_Share_css :style{ marginRight: formtwo.dimensionalInfoList.length 1 ? 24px : 10px, } clickaddNextInput(groupIndex) / el-icon classicon_height_css v-ifformtwo.dimensionalInfoList.length ! 1 CircleClose clickdelInput(groupIndex) / /el-icon /div !-- 子維度 -- draggable v-modelgroup.childInfo item-keyid handle.drag-handle animation300 endonEnd template #item{ element: groupChild, index: groupIndexChild } div classgroupChild_card !-- 前方樣式引導(dǎo)用于連接父節(jié)點(diǎn)和子節(jié)點(diǎn)的連線-- div style width: 30px; height: 50px; float: left; margin-top: -24px; div styledisplay: flex div :style{ height: groupIndexChild ! group.childInfo.length - 1 ? 40px : 35px, paddingLeft: 7px, borderRight: 1px solid #979797, } /div div style width: 20px; height: 6px; margin-top: 34px; border-left: 1px solid #979797; border-bottom: 1px solid #979797; border-radius: 0 0 0 5px; margin-left: -0.5px; /div /div div style width: 0.5px; height: 10px; background-color: #979797; float: left; margin-left: 7px; v-ifgroupIndexChild ! group.childInfo.length - 1 /div /div span classiconfont icon-hengxian drag-handle/span el-form-item :prop dimensionalInfoList. groupIndex .childInfo. groupIndexChild .content :rules{ required: true, message: 子維度不能為空, trigger: blur, } el-input v-modelgroupChild.content placeholder請(qǐng)輸入子分析維度 classdesc__content desc__content_son / /el-form-item el-icon classicon_height_css CircleClose clickdelInputSon(child) / /el-icon /div /template /draggable /div /template /draggable /el-form /div /template script setup import { ref } from vue; import { CircleClose } from element-plus/icons-vue; import { SisternodeOutlined } from ant-design/icons-vue; import draggable from vuedraggable; let i 1; //自定義id const formRef ref(); //定義分析維度表單 // 分析維度初始化就顯示三個(gè)框 const formtwo ref({ dimensionalInfoList: [ { content: , dimId: i, childInfo: [] }, { content: , dimId: i, childInfo: [] }, { content: , dimId: i, childInfo: [] }, ], }); //拖拽結(jié)束事件,重新更新數(shù)據(jù) const onEnd () { }; // 添加子聯(lián)動(dòng)輸入框 const addNextInput (index) { // 獲取當(dāng)前維度對(duì)象 const currentItem formtwo.value.dimensionalInfoList[index]; if (!currentItem.childInfo) { currentItem.childInfo []; } // 向當(dāng)前維度對(duì)象的 childInfo 數(shù)組中添加一個(gè)新的子維度對(duì)象 currentItem.childInfo.push({ content: , }); }; // 刪除維度輸入框 const delInput (index) { formtwo.value.dimensionalInfoList.splice(index, 1); }; // 刪除子維度輸入框 const delInputSon (child) { // 找到當(dāng)前子維度對(duì)應(yīng)的父維度對(duì)象 const parentIndex formtwo.value.dimensionalInfoList.findIndex((item) item.childInfo.includes(child), ); const parentItem formtwo.value.dimensionalInfoList[parentIndex]; // 從父維度對(duì)象的 childInfo 數(shù)組中刪除當(dāng)前子維度對(duì)象 parentItem.childInfo parentItem.childInfo.filter((item) item ! child); }; /script style langscss scoped .father_box { display: flex; justify-content: start; width: 100%; .icon_Share_css { text-align: center; margin-top: 15px; color: rgb(151, 151, 151); cursor: pointer; margin-right: 10px; } .icon_Share_css :hover { color: #1363df; } } .icon_height_css { text-align: center; line-height: 30px; margin-top: 15px; color: rgb(151, 151, 151) !important; cursor: pointer; } .icon_height_css :hover { color: red; } .desc__content { margin-left: 10px; margin-right: 10px; width: 100%; :deep .el-textarea__inner { background-color: rgba(246, 246, 246); min-height: 50px; max-height: 200px; } :deep .el-input__wrapper { background-color: rgba(246, 246, 246); } } .adddome { width: 100%; font-size: 12px; line-height: 12px; float: left; display: flex; justify-content: space-between; padding-bottom: 16px; .icon-gengxin { color: #979797; font-size: 15px; margin-right: 0; } .icon-gengxin:hover { color: #1363df; } } .icon-hengxian { font-size: 15px; color: #979797; text-align: center; line-height: 30px; cursor: move; } :deep .el-form-item__error { margin-left: 25px; } .son :deep .el-form-item__error { margin-left: 50px !important; } .prependInput { margin-bottom: 15px; } :deep .el-input-group--prepend .el-input__wrapper, .el-input-group__append { background-color: rgba(246, 246, 246) !important; } :deep .el-input-group__prepend { background-color: rgba(246, 246, 246) !important; } .no-select { user-select: none; } .group_card { .groupChild_card { display: flex; width: 95%; } } .el-form-item { width: 100%; } /style注意點(diǎn)1、拖拽的id必須要有要不然不能進(jìn)行拖拽2、handle.drag-handle為draggable組件的拖拽盒子的css所以要在導(dǎo)入的icon圖標(biāo)上添加上該className3、且template下方必須只有一個(gè)item的slot——必須只有一個(gè)子節(jié)點(diǎn)4、子維度在父維度內(nèi)部5、關(guān)于圖片上父節(jié)點(diǎn)與子節(jié)點(diǎn)的連線是html手動(dòng)調(diào)整實(shí)現(xiàn)所以你們要寫的時(shí)候需要根據(jù)實(shí)際情況進(jìn)行調(diào)整!-- 前方樣式引導(dǎo)用于連接父節(jié)點(diǎn)和子節(jié)點(diǎn)的連線-- div style width: 30px; height: 50px; float: left; margin-top: -24px; div styledisplay: flex div :style{ height: groupIndexChild ! group.childInfo.length - 1 ? 40px : 35px, paddingLeft: 7px, borderRight: 1px solid #979797, } /div div style width: 20px; height: 6px; margin-top: 34px; border-left: 1px solid #979797; border-bottom: 1px solid #979797; border-radius: 0 0 0 5px; margin-left: -0.5px; /div /div div style width: 0.5px; height: 10px; background-color: #979797; float: left; margin-left: 7px; v-ifgroupIndexChild ! group.childInfo.length - 1 /div /div