當(dāng)我們能夠設(shè)置單行狀態(tài)改變的時(shí)候，那么肯定可以拿到選中的當(dāng)前行的id或者下標(biāo)index。
只要設(shè)定一個(gè)初始化值在拖拽開始的時(shí)候重新賦值，然后再處理選中狀態(tài)的時(shí)候進(jìn)行判斷即可。
前期寫的時(shí)候沒(méi)有注意到這個(gè)問(wèn)題，可以看這個(gè)文章。
在復(fù)測(cè)的時(shí)候發(fā)現(xiàn)了，當(dāng)我改變?nèi)我庖粋€(gè)排序的時(shí)候會(huì)影響到其他的狀態(tài)。雖然其他行的順序沒(méi)有變化，但是設(shè)定的顏色卻渲染了。
解決 ，在data 中初始設(shè)定一個(gè)新的變量 承接 選中的行的父元素下標(biāo) startIndex: ‘’， 在開始拖拽的時(shí)候獲取并重新賦值， this.startIndex = i，在 isSelected 處理改變顏色的時(shí)候判斷即可。
以前的問(wèn)題
解決后不在影響
主要的代碼也就在這里，天機(jī)了傳值和接收賦值處理文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-795338.html
isSelected(i, j) {
console.log(this.startIndex, ‘///this.startIndex’, i);
if(this.startIndex === i){
return j === this.selectedIndex; // 判斷該圖標(biāo)是否被選中
}
},
dragStart (i, j, item2) {
console.log(i, j, item2, ‘----------------’);
this.startIndex = i // 開始選中的行下標(biāo)。
this.dragStartIndex = j
this.dragStartData = item2
this.selectedIndex = j; // 更新選中的索引值
},
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-795338.html
<template>
<div class="atomizing-wrap">
<div class="liquid-wrap">
<div class="conduit1">
<!-- <img src="../../../assets/images/emulsification/liquidtank/conduit1.png" alt="">
<div class="lititle-wrap">
<lititle title="井下原水"/>
</div> -->
</div>
<div class="liquid-box">
<liquid :dataInfo="dataInfos.emulsionSite" @liquidClik="liquidClik()"/>
</div>
</div>
<div class="supercharge-box">
<supercharge :dataInfo="dataInfos.superchargeSite" :typeInfo="dataInfos.emulsionSite"/>
</div>
<div class="pump-box">
<pump :dataInfo="dataInfos" @pumpClik="pumpClik()"/>
</div>
<zmjdialog ref="zmjdialog" top="10vh" width="900px" @confirm="confirm" @cancel="cancel" >
<el-form ref="ruleForm" :model="formData" label-width="150px">
<div class="df">
<!-- :rules="[{ required: true, message: '請(qǐng)輸入測(cè)點(diǎn)', trigger: ['blur', 'change'] }]" -->
<el-form-item
prop="emulsionSite.site"
label="清水箱測(cè)點(diǎn)"
>
<el-input v-model="formData.emulsionSite.site" placeholder="請(qǐng)輸入清水箱測(cè)點(diǎn)">
</el-input>
</el-form-item>
<el-form-item
label-width="80px"
prop="emulsionSite.unit"
label="單位"
>
<el-input v-model="formData.emulsionSite.unit" :style="{width: '100px'}" placeholder="請(qǐng)輸入單位">
</el-input>
</el-form-item>
<el-form-item
label-width="80px"
prop="emulsionSite.maxValue"
label="滿量程"
>
<el-input v-model="formData.emulsionSite.maxValue" type="number" :style="{width: '100px'}" placeholder="滿量程">
</el-input>
</el-form-item>
</div>
<div class="df">
<el-form-item
prop="systemSite.site"
label="噴霧泵系統(tǒng)壓力測(cè)點(diǎn)"
>
<el-input v-model="formData.systemSite.site" placeholder="請(qǐng)輸入噴霧泵系統(tǒng)壓力">
</el-input>
</el-form-item>
<el-form-item
label-width="80px"
prop="systemSite.unit"
label="單位"
>
<el-input v-model="formData.systemSite.unit" :style="{width: '100px'}" placeholder="請(qǐng)輸入單位">
</el-input>
</el-form-item>
</div>
<div class="pressurize">
<div class="addpressurize" @click="addpressurize">添加噴霧增壓</div>
<el-form-item
v-for="(item, i) in formData.superchargeSite"
:key="i"
:label="`${i+1}#噴霧增壓`"
>
<el-input v-model="item.site" placeholder="請(qǐng)輸入噴霧增壓測(cè)點(diǎn)">
</el-input>
<div v-if="i !== 0" class="el-icon-remove" @click="deletepressurize(i)"></div>
</el-form-item>
<!-- <el-form-item
label-width="80px"
prop="superchargeSite.number"
label="數(shù)量"
:rules="[{ required: true, message: '請(qǐng)輸入數(shù)量', trigger: ['blur', 'change'] },{ validator: validatenum, trigger: 'blur'}]"
>
<el-input v-model="formData.superchargeSite.number" type="number" :style="{width: '100px'}" placeholder="請(qǐng)輸入數(shù)量">
</el-input>
</el-form-item> -->
</div>
<div class="pump-list">
<div class="title">
<span>噴霧泵</span>
<ul>
<!-- <li @click="pumpcancel">取消</li> -->
<li @click="addpump">添加</li>
</ul>
</div>
<div class="ulmine">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item v-for="(item, i) in formData.pumplist" :key="i" :name="i">
<template slot="title">
{{ i+1 }}#{{ item.title }}
<div class="pumpdelete" @click.stop="pumpdelete(i)">刪除</div>
</template>
<div class="ulmine-div">
<div class="addpumpsite" @click="addpumpsite(i)">添加測(cè)點(diǎn)</div>
<div class="df">
<el-form-item
label-width="100px"
label="噴霧泵測(cè)點(diǎn)"
>
<el-input v-model="item.site" placeholder="請(qǐng)輸入測(cè)點(diǎn)">
</el-input>
</el-form-item>
<el-form-item
label-width="80px"
label="分站遠(yuǎn)控"
>
<el-switch
v-model="item.control"
>
</el-switch>
</el-form-item>
<el-form-item
label-width="80px"
label="解鎖"
>
<el-switch
v-model="item.unlock"
>
</el-switch>
</el-form-item>
</div>
<div v-for="(item2, j) in item.list"
:key="j"
class="df"
draggable="true"
@dragstart="dragStart(i, j, item2)"
@dragover.prevent="dragOver(j)"
@dragend="dragEnd(i)"
>
<i class="el-icon-s-fold" :class="{'selected': isSelected(i, j)}"></i>
<el-form-item
label-width="100px"
label="測(cè)點(diǎn)名稱"
>
<el-input v-model="item2.label" placeholder="請(qǐng)輸入測(cè)點(diǎn)名稱">
</el-input>
</el-form-item>
<el-form-item
label-width="50px"
label="測(cè)點(diǎn)"
>
<el-input v-model="item2.site" :style="{width: '100px'}" placeholder="請(qǐng)輸入測(cè)點(diǎn)">
</el-input>
</el-form-item>
<el-form-item
label-width="50px"
label="單位"
>
<el-input v-model="item2.unit" :style="{width: '100px'}" placeholder="請(qǐng)輸入單位">
</el-input>
</el-form-item>
<el-form-item
label-width="60px"
label="最大值"
>
<el-input v-model="item2.maxValue" type="number" :style="{width: '100px'}" placeholder="最大值">
</el-input>
</el-form-item>
<div class="el-icon-remove" @click="deletepumpsite(i,j)"></div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</el-form>
</zmjdialog>
<zmjdialog ref="childInfoDialog" width="850px" top="30vh" :title="`${label}歷史數(shù)據(jù)`" @confirm="childInfoDialog">
<zmj-echarts :ref="`historicalLineEcharts${EchartsId}`" :echarts-id="`historicalLineEcharts${EchartsId}`" :height="'200px'"></zmj-echarts>
</zmjdialog>
</div>
</template>
<script>
import ZmjEcharts from '@/components/zmjEcharts.vue'
import { shearerOptions } from '../../components/echarts/Historicalline.js'
export default {
name: 'atomizing',
components: {
ZmjEcharts,
liquid: () => import('./liquid.vue'),
// lititle: () => import('./li-title.vue'),
supercharge: () => import('./supercharge.vue'),
pump: () => import('./pump.vue')
},
props: {
dataInfo: {
type: Object,
default (){
return {}
}
},
dataTypeList: {
type: Array,
default (){
return []
}
}
},
data () {
return {
activeNames: [0],
formData: {},
dataInfos: {},
groupName: '', // 測(cè)點(diǎn)大類
dataName: '', // 測(cè)名稱
deviceIdList: 1, // 設(shè)備號(hào)
label: null,
EchartsId: null,
selectedIndex: -1,
dragStartIndex: '',
dragStartData: '',
startIndex: ''
}
},
watch: {
dataInfo: {
immediate: true,
deep: true,
handler (val) {
this.formData = JSON.parse(JSON.stringify(val))
this.dataInfos = JSON.parse(JSON.stringify(val))
}
}
},
computed: {},
created () {},
mounted () {
this.bus.$on("waterCustomEvent", (v) => {
this.dbChange(v, 'pumplistClikqs')
});
window.$eventBus.$on('wsMessage', message => {
let dataType = message.dataType
message.data.forEach(val => {
for(let i in this.dataInfos){
if(Array.isArray(this.dataInfos[i])){
this.dataInfos[i].forEach(v => {
if(this.sifn(v.site) === dataType && this.sifn(v.site, 2) === val.deviceId){
v.value = val.value
}
v.list && v.list.forEach(v2 => {
if(this.sifn(v2.site) === dataType && this.sifn(v2.site, 2) === val.deviceId){
v2.value = val.value
}
})
})
}else if(this.sifn(this.dataInfos[i].site) === dataType && this.sifn(this.dataInfos[i].site, 2) ===val.deviceId){
this.dataInfos[i].value = val.value
}
}
})
})
},
beforeDestroy () {
window.$eventBus.$off('wsMessage')
},
methods: {
isSelected(i, j) {
console.log(this.startIndex, '///this.startIndex', i);
if(this.startIndex === i){
return j === this.selectedIndex; // 判斷該圖標(biāo)是否被選中
}
},
dragStart (i, j, item2) {
console.log(i, j, item2, '----------------');
this.startIndex = i // 開始選中的行下標(biāo)。
this.dragStartIndex = j
this.dragStartData = item2
this.selectedIndex = j; // 更新選中的索引值
},
// 只要拖拽元素進(jìn)入到放置區(qū)域就觸發(fā)，這里實(shí)際是鼠標(biāo)指針進(jìn)入放置區(qū)域才觸發(fā)
dragOver (j) {
this.dragOverIndex = j
},
dragEnd (i) {
const copyTodolist = [...this.formData.pumplist[i].list]
// 刪除老的節(jié)點(diǎn)
copyTodolist.splice(this.dragStartIndex, 1)
// 在列表中目標(biāo)位置增加新的節(jié)點(diǎn)
copyTodolist.splice(this.dragOverIndex, 0, this.dragStartData)
this.selectedIndex = this.dragOverIndex; // 更新選中的索引值
this.formData.pumplist[i].list = [...copyTodolist]
this.dragOverIndex = ''
},
pumpClik () {
this.dbChange(this.dataInfos.systemSite, 'pumpClikqs')
},
liquidClik () {
this.dbChange(this.dataInfos.emulsionSite, 'liquidClikqs')
},
dbChange(item, EchartsId) {
this.EchartsId = EchartsId
this.$refs.childInfoDialog.open()
let newArr = item?.site?.split('/') || [];
if(newArr.length === 3){
this.groupName = `${newArr[0]}` // 測(cè)點(diǎn)大類
this.deviceIdList = `${newArr[1]}`*1 // 設(shè)備號(hào)
this.dataName = `${newArr[2]}` // 測(cè)名稱
}
this.label = item.label || item.title + (item.text ? item.text : '' )
let params = {
workFaceCode: window.$getStorage('workFaceInfo').workFaceCode,
startTime: window.$dayjs().format('YYYY-MM-DD 00:00:00'),
endTime: window.$dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00'),
aggregateType : 'none', // 聚合類型 傳none獲取原始?xì)v史值
groupName: this.groupName, // 測(cè)點(diǎn)大類
dataName: this.dataName, // 測(cè)名稱
deviceIdList: this.deviceIdList // 設(shè)備號(hào)
}
let thisDataList = null
window.$axiosGet('deviceHistory', params).then((res) => {
if(!res.length){
this.$refs[`historicalLineEcharts${this.EchartsId}`] && this.$refs[`historicalLineEcharts${this.EchartsId}`].upDataEcharts(shearerOptions(res || [], params, this.dataInfos))
return
}
thisDataList = res.map(item => {
return item.data
})
this.$nextTick(() => {
this.$refs[`historicalLineEcharts${this.EchartsId}`] && this.$refs[`historicalLineEcharts${this.EchartsId}`].getEchartsLiving();
this.$refs[`historicalLineEcharts${this.EchartsId}`] && this.$refs[`historicalLineEcharts${this.EchartsId}`].upDataEcharts(shearerOptions(thisDataList || [], params, this.dataInfos))
})
}).catch(() => {
this.$refs[`historicalLineEcharts${this.EchartsId}`] && this.$refs[`historicalLineEcharts${this.EchartsId}`].upDataEcharts(shearerOptions(thisDataList || [], params, this.dataInfos))
})
},
childInfoDialog () {
this.$refs.childInfoDialog.close()
},
sifn (v, i = 1) {
if(v){
let arr = v.split('/')
if(arr.length === 3){
if(i === 1){
return `${arr[0]}_${arr[2]}`
}else if(i === 2) {
return Number(arr[1])
}
}else{
return v
}
}else{
return v
}
},
handleChange (val) {
console.log(val)
},
validatenum (rule, value, callback) {
if (value === ''||value === null) {
callback(new Error('數(shù)量不能為空'))
} else if (Number(value) < 1 || Number(value) > 4) {
callback(new Error('數(shù)量必須大于0且小于等于4'))
} else {
callback()
}
},
// 乳化增壓
addpressurize () {
if(this.formData.superchargeSite.length >= 4){
this.$message.warning('噴霧增壓最多添加4個(gè)')
return
}
this.formData.superchargeSite.push({
site: null,
value: null
})
},
// 乳化增壓刪除
deletepressurize (i) {
this.formData.superchargeSite.splice(i, 1)
},
addpump () {
if(this.formData.pumplist.length >= 4){
this.$message.warning('噴霧泵最多添加4個(gè)')
return
}
this.formData.pumplist.push(
{
title: '噴霧泵',
label: '噴霧泵測(cè)點(diǎn)',
site: null,
control: true,
unlock: true,
list: []
}
)
},
// 乳化泵取消修改
pumpcancel () {
},
// 乳化泵刪除
pumpdelete (i) {
if(this.formData.pumplist.length <= 1){
this.$message.warning('噴霧泵最少有1個(gè)')
return
}
this.formData.pumplist.splice(i, 1)
},
// 乳化泵測(cè)點(diǎn)添加
addpumpsite (i) {
this.formData.pumplist[i].list.push({
label: null,
site: null,
unit: null,
maxValue: null,
value: null
})
},
// 乳化泵測(cè)點(diǎn)刪除
deletepumpsite (i, j) {
this.formData.pumplist[i].list.splice(j, 1)
},
edit () {
this.formData = JSON.parse(JSON.stringify(this.dataInfo))
this.$refs.zmjdialog.open()
},
confirm (){
this.selectedIndex = -1;
this.dragStartIndex = '';
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$refs.zmjdialog.close()
let arr = []
for(let i in this.formData){
if(Array.isArray(this.formData[i])){
this.formData[i].forEach(v => {
arr.push(v.site)
v.list && v.list.forEach(v2 => {
arr.push(v2.site)
})
})
}else{
arr.push(this.formData[i].site)
}
}
this.$emit('update:dataTypeList', arr)
this.$emit('update:dataInfo', this.formData)
this.$message.success('保存成功')
} else {
return false
}
})
},
cancel () {
this.selectedIndex = -1;
this.dragStartIndex = '';
console.log('取消')
}
}
}
</script>
<style lang="scss" scoped>
.atomizing-wrap{
position: relative;
text-align: left;
}
.liquid-wrap{
width:260px;
margin-left: 20px;
position: relative;
}
.conduit1{
position: absolute;
top: 20px;
.lititle-wrap{
position: absolute;
top: 0;
left: 20px;
}
}
.liquid-box{
position: absolute;
left: 50px;
top: 90px;
}
.supercharge-box{
position: absolute;
left: 246px;
top: 45px;
}
.pump-box{
position: absolute;
left: 483px;
top: 45px;
}
.pump-list{
color: #fff;
border:1px solid #999;
border-radius: 5px;
.title{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px;
width: 100%;
height: 36px;
background: rgba(238, 238, 238, 0.08);
border-bottom: 1px solid #314150;
box-sizing: border-box;
ul{
display: flex;
li{
margin-left: 8px;
width: 64px;
line-height: 24px;
font-size: 14px;
text-align: center;
border-radius: 3px;
user-select: none;
cursor: pointer;
}
// >li:nth-child(1){
// border: 1px solid rgba(255, 255, 255, 0.24);
// }
>li:nth-child(1){
border: 1px solid #0088FF;
}
}
}
.ulmine{
padding: 10px 20px;
height: 400px;
overflow: hidden;
overflow-y: scroll;
.ulmine-div{
position: relative;
padding: 15px 0;
}
.el-icon-remove{
cursor: pointer;
height: 36px;
line-height: 36px;
font-size: 20px;
padding-left: 15px;
color: #999;
}
.pumpdelete{
width: 64px;
line-height: 24px;
font-size: 14px;
text-align: center;
border-radius: 3px;
cursor: pointer;
border: 1px solid #B23B3B;
margin-left: 620px;
}
.addpumpsite{
position: absolute;
line-height: 24px;
font-size: 14px;
text-align: center;
border-radius: 3px;
cursor: pointer;
//right: 10px;
top: 20px;
width: 84px;
right: 30px;
border: 1px solid #0088FF;
}
.el-icon-s-fold{
margin-top: 12px;
color: #fff;
}
.selected {
color: red; /* 設(shè)置選中時(shí)的顏色 */
}
::v-deep{
.el-collapse{
border: none;
}
.el-collapse-item__header{
padding-left: 20px;
//background: transparent;
color: #fff;
border-bottom:none;
background: rgba(238, 238, 238, 0.08);
}
.el-collapse-item__wrap{
background: transparent;
border-bottom: 1px dashed #7a7d80;
}
.el-collapse-item__content{
color: #fff;
padding-bottom: 0;
}
}
}
.ulmine::-webkit-scrollbar {
display: none;
}
}
.pressurize{
position: relative;
flex-wrap:wrap;
.addpressurize{
color: #fff;
position: absolute;
line-height: 24px;
font-size: 14px;
text-align: center;
border-radius: 3px;
cursor: pointer;
left: 412px;
top: 5px;
width: 104px;
border: 1px solid #0088FF;
z-index: 99;
}
.el-icon-remove{
cursor: pointer;
height: 36px;
line-height: 36px;
font-size: 20px;
padding-left: 10px;
color: #999;
}
}
</style>
到了這里，關(guān)于vue 渲染數(shù)組，拖拽排序，渲染同一個(gè)數(shù)組拖拽排序不影響其他選中行狀態(tài)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
