Click Add Component to the part on the right to produce the result as shown below.
<!-- Right side -->
<div class="part-components">
<!-- Above -->
<div class="el-row">
<div class="choice">
<el-select
ref="ItemData"
v-model="value"
placeholder="Select thesis components"
@change="Onchange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="">
<el-button type="primary" @click="addClick()"
>Add component to Part</el-button
>
</div>
</div>
<!-- below-->
<div
class="component-item-content"
v-for="(item, index) in arr"
:key="index"
>
<div class="name">{ { item }}</div>
<div class="actions">
<div>
<!--Move up-->
<el-button icon="el-icon-arrow-up" class="pad" @click="moveUp(index)"></el-button>
</div>
<div>
<el-button class="pad">Edit configuration</el-button>
</div>
<div>
<!--Move down-->
<el-button icon="el-icon-arrow-down" class="pad" @click="moveDown(index)"></el-button>
</div>
<div>
<el-button
icon="el-icon-delete"
class="pad"
@click="Ondelete(index)"
></el-button>
</div>
</div>
</div>
</div>
data() {
return {
arr: [], //Content added when changing
options: [
{
value: "Chinese summary",
label: "Chinese summary",
},
{
value: "Chinese directory",
label: "Chinese catalog",
},
{
value: "English directory",
label: "English catalog",
},
{
value: "Chinese title",
label: "Chinese title",
},
{
value: "Chinese subtitle",
label: "Chinese subtitle",
},
],
value: "",
title: "", //Select thesis components
};
},
//Here is the method
//Move component up
moveUp(index){
var that = this;
// console.log('Move up',index);
// console.log(that.arr[index]);
if (index > 0) {
let upDate = that.arr[index - 1];
that.arr.splice(index - 1, 1);
that.arr.splice(index,0, upDate);
} else {
alert('It is already the first item and cannot be moved up');
}
},
//Move component down
moveDown(index){
var that = this;
// console.log('move down',index,row);
if ((index + 1) === that.arr.length){
alert('This is the last item and cannot be moved down');
} else {
// console.log(index);
let downDate = that.arr[index + 1];
that.arr.splice(index + 1, 1);
that.arr.splice(index,0, downDate);
}
},
// Call this method when selet changes
Onchange(e) {
// console.log(e)
this.title = e;
},
//single delete
Ondelete(index) {
this.arr.splice(index, 1);
},
//Add component to part
addClick() {
if (this.arr.indexOf(this.title) == -1 && this.title) {
this.arr.unshift(this.title);
}
},
Click the add part button at the bottom to dynamically generate the following content
//This complete code. But the overall up and down movement is not done, it is the same as the up and down movement of some components.
<template>
<div>
<div class="configuration underline">Thesis component (Part) configuration:</div>
<!-- Thesis component configuration-->
<div class="root-wrapper" v-for="(item, index) in list" :key="index">
<!-- Left side -->
<div class="part-basic">
<div class="part-action">
<div>
<el-button class="pad">Edit Part basic configuration</el-button>
</div>
<div>
<el-button icon="el-icon-arrow-up" class="pad"></el-button>
</div>
<div>
<el-button icon="el-icon-arrow-down" class="pad"></el-button>
</div>
<div>
<el-button
icon="el-icon-delete"
class="pad"
@click="deletePart(index)"
></el-button>
</div>
</div>
</div>
<!-- Right side -->
<div class="part-components">
<!-- Above -->
<div class="el-row">
<div class="choice">
<el-select
ref="ItemData"
v-model="value"
placeholder="Select thesis components"
@change="Onchange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="">
<el-button type="primary" @click="addClick()"
>Add component to Part</el-button
>
</div>
</div>
<!-- below-->
<div
class="component-item-content"
v-for="(item, index) in arr"
:key="index"
>
<div class="name">{ { item }}</div>
<div class="actions">
<div>
<!--Move up-->
<el-button
icon="el-icon-arrow-up"
class="pad"
@click="moveUp(index)"
></el-button>
</div>
<div>
<el-button class="pad">Edit configuration</el-button>
</div>
<div>
<!--Move down-->
<el-button
icon="el-icon-arrow-down"
class="pad"
@click="moveDown(index)"
></el-button>
</div>
<div>
<el-button
icon="el-icon-delete"
class="pad"
@click="Ondelete(index)"
></el-button>
</div>
</div>
</div>
</div>
</div>
<!-- Button added -->
<div class="add-part">
<el-button type="primary" icon="el-icon-plus" @click="addPart"
>Add part</el-button
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [], //Dynamicly add thesis component (Part) configuration
arr: [], //Content added when changing
options: [
{
value: "Chinese summary",
label: "Chinese summary",
},
{
value: "Chinese directory",
label: "Chinese catalog",
},
{
value: "English directory",
label: "English catalog",
},
{
value: "Chinese title",
label: "Chinese title",
},
{
value: "Chinese subtitle",
label: "Chinese subtitle",
},
],
value: "",
title: "", //Select thesis components
};
},
methods: {
//Move component up
moveUp(index) {
var that = this;
if (index > 0) {
let upDate = that.arr[index - 1];
that.arr.splice(index - 1, 1);
that.arr.splice(index, 0, upDate);
} else {
alert("It is already the first item and cannot be moved up");
}
},
//Move component down
moveDown(index) {
var that = this;
if (index + 1 === that.arr.length) {
alert("This is the last item, cannot be moved down");
} else {
// console.log(index);
let downDate = that.arr[index + 1];
that.arr.splice(index + 1, 1);
that.arr.splice(index, 0, downDate);
}
},
// Call this method when selet changes
Onchange(e) {
// console.log(e)
this.title = e;
},
//single delete
Ondelete(index) {
this.arr.splice(index, 1);
},
//Add component to part
addClick() {
if (this.arr.indexOf(this.title) == -1 && this.title) {
this.arr.unshift(this.title);
}
},
//Add the overall part
addPart() {
this.list.push({});
},
//Delete the entire part
deletePart(index) {
this.list.splice(index, 1);
},
},
};
</script>
<style lang="scss" scoped>
/* Title color settings*/
.configuration {
margin-bottom: 20px;
color: rgb(5, 122, 238);
padding-top: 26px;
font-size: 18px;
}
.underline {
border-top: 1px solid #e5e5e5;
}
// middle body part
.root-wrapper {
display: flex;
flex-direction: row;
width: 100%;
// left
.part-basic {
width: 300px;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
border-right: 1px solid #d5d5d5;
.part-action {
display: flex;
flex-direction: row;
margin-left: 15px;
}
}
//Right
.part-components {
display: flex;
width: 80%;
flex-direction: column;
// superior
.el-row {
margin-left: 20px;
display: flex;
.choice {
margin-right: 10px;
}
}
// Down
.component-item-content {
display: flex;
justify-content: space-between;
margin: 20px 0 0 26px;
.actions {
display: flex;
}
}
}
}
// Button settings
.pad {
padding: 0;
margin-right: 15px;
color: rgba(64, 158, 255, 1);
border: none;
}
// add part
.add-part {
width: 100%;
display: flex;
justify-content: center;
}
</style>