<el-radio-group v-else v-model="radioLabel" class="radio-group">
<div v-for="(item,index) in dataSettingForm.staticData" :key="index" draggable="true" @dragstart="dragStart(index)" @dragenter="dragEnter(index)" @drageover="dragOver(index)" @dragend="dragEnd(index)">
<el-radio :label="item.value" @change="changeRadio(item,index)">
<i class="iconfont iconfont-remove" title="移动"></i>
<el-input class="radio-data" type="text" v-model="item.text" autocomplete="off" @keyup.native.enter="saveElementConfig" @blur="saveElementConfig"></el-input>
<el-input class="radio-data" type="text" v-model="item.value" autocomplete="off"></el-input><i class="iconfont iconfont-delete2" @click.stop="deletDataSource(item,index)" title="删除"></i>
</el-radio>
</div>
</el-radio-group>
<el-button type="primary" class="w-300" @click="addItem">添加一项</el-button>
因为需求用的是单选框,大家可以根据自己情况自定义添加,拖拽主要用的就是
draggable=“true” @dragstart=“dragStart(index)” @dragenter=“dragEnter(index)” @drageover=“dragOver(index)” @dragend="dragEnd(index)"
/**
* 静态数据拖拽排序
* 开始拖动 (tempx和tempx2在data里面定义就好)
*/
dragStart(index) {
this.tempx=index;
},
/**
* 拖动后进入某个控件内
*/
dragEnter(index) {
this.tempx2=index;
},
/**
* 移动拖动对象
*/
dragOver(index) {
this.tempx2=index;
},
/**
* 完成拖动
*/
dragEnd(index) {
if(this.tempx==this.tempx2){
return ;
}else{
let t= this.dataSettingForm.staticData[this.tempx];
this.dataSettingForm.staticData.splice(this.tempx,1);
this.dataSettingForm.staticData.splice(this.tempx2,0,t);
this.tempx=-1;
this.tempx2=-1;
this.$forceUpdate();
}
},
/**
*新加一项静态数据
*/
addItem(){
this.dataSettingForm.staticData.push({
text:"选项"+Number((this.dataSettingForm.staticData.length)+1),
value:"option"+Number((this.dataSettingForm.staticData.length)+1)
});
this.saveElementConfig();
},