v-bind:group="{ name: 'person', pull: 'clone', put: false }" v-bind:clone="cloneItem">
{{ item.aliasName }}
v-on:add="addItem"> {{ item.aliasName }}
v-on:add="addItem01"> icon="el-icon-delete"> {{ item.aliasName }}
import draggable from "vuedraggable"
export default {
name: 'dragViewflog',
components: {
draggable
},
props: {
msg: String
},
data: function () {
return {
originDataArr: new Array(),
newDataArr: new Array(),
newDataArr01: new Array(),
isShowTooltip: false,
time: "",
localTime: ""
}
},
mounted: function () {
this.initData();
},
methods: {
deleteRow(index) {
this.newDataArr.splice(index, 1)
},
deleteRow_two(index) {
this.newDataArr01.splice(index, 1)
},
initData: function () {
this.originDataArr = [
{ columnName: "ABC", aliasName: "数据01", columnType: 15, },
{ columnName: "abc", aliasName: "数据02", columnType: 15, },
{ columnName: "#", aliasName: "数据03", columnType: 15, },
{ columnName: "&", aliasName: "数据04", columnTypeage: 15, }
]
},
cloneItem: function (val) {
return JSON.parse(JSON.stringify(val))
},
dragItem: function (widget) {
console.log("01", widget);
},
addItem(widget) {
console.log(widget)
this.newDataArr = this.newDataArr.filter(
(obj, index) => this.newDataArr.findIndex((item) => item.aliasName === obj.aliasName) === index
)
},
dragItem01: function (widget) {
console.log("03", widget);
},
addItem01(widget) {
console.log(widget)
this.newDataArr01 = this.newDataArr01.filter((obj, index) =>
this.newDataArr01.findIndex((item) => item.aliasName === obj.aliasName) === index)
},
mouseOver(event) {
this.isShowTooltip = event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;
},
}
}
.dialog {
position: relative;
}
button[data-v-0d7ae0fd][data-v-0d7ae0fd] {
width: 21px;
height: 24px;
position: absolute;
top: 8px;
right: 10px;
transform: translate(50%, -50%);
}
button {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
.my_draggle {
/* width: 145%; */
display: flex;
/* justify-content:space-between; */
margin: 10px 0;
}
.md_title {
font-size: 24px;
height: 60px;
}
#Id_mdc_right {
display: flex;
flex-direction: column;
margin-left: 20px;
height: 430px;
width: 100%;
}
.mdc_left {
width: 200px;
height: 400px;
display: inline-block;
border: 1px solid #CCCCCC;
/* border-radius: 10px; */
vertical-align: top;
overflow-y: auto;
}
.mdc_right {
flex: 1;
width: 100%;
display: inline-block;
border: 1px solid #CCCCCC;
overflow-y: auto;
/* border-radius: 10px; */
vertical-align: top;
margin-bottom: 5px;
}
.mdc_left>div {
height: 30px;
line-height: 30px;
cursor: move;
padding: 0 10px;
}
.mdc_left>div:hover {
background-color: #cccccc;
}
.mdc_right>div {
height: 20px;
line-height: 20px;
margin-top: 6px;
cursor: move;
}
.mdc_right>div:hover {
background-color: #CCCCCC;
}
delName .mdc_right>div>span {
display: inline-block;
vertical-align: top;
}
.mdc_right>div>span>img {
height: 15px;
}
.word {
font-size: 18px;
font-weight: bold;
margin: 5px 0 10px 5px;
}
.delIcon {
/* color: #97d9f8; */
margin-right: 10px;
margin-top: 9px;
color: red;
}
.delName {
margin-left: 10px;
}
.over-ellipsis {
display: block;
width: calc(100%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}