以下代码
<template>
<div class="selector">
<div class="selector-left">
<div
class="selector-left-tag"
v-for="(tag, index) in tags"
:key="index"
@click="rightTransfer(tag, index)"
>
{{ tag.label }}
div>
div>
<div class="selector-line">div>
<div class="selector-right">
<div
class="selector-right-tag"
v-for="(sel, index) in selectedTags"
:key="index"
@click="letfTransfer(sel, index)"
>
{{ sel.label }}
div>
div>
<div class="selector-line-btn">
<button @click="sendTags">确认button>
div>
div>
template>
<script>
export default {
name: "tagSelect",
props: {
value: () => "",
},
data() {
return {
tags: [
{ label: "标签1", id: 1 },
{ label: "标签3", id: 3 },
{ label: "标签2", id: 2 },
{ label: "标签5", id: 5 },
{ label: "标签4", id: 4 },
{ label: "标签6", id: 6 },
],
selectedTagIds: [],
selectedTags: [],
};
},
created() {
this.tags.forEach((i, index) => {
i.sortIndex = index;
console.log(i);
});
},
methods: {
rightTransfer(val, index) {
this.selectedTags.push({ ...val });
this.tags.splice(index, 1);
this.selectedTagIds.push(val.id);
},
letfTransfer(val, index) {
// this.tags.push({ ...val });
this.selectedTags.splice(index, 1);
this.selectedTagIds.splice(index, 1);
this.tags.splice(val.sortIndex, 0, val);
},
sendTags() {
this.$emit("change", this.selectedTagIds, this.selectedTags);
},
},
};
script>
<style lang="scss">
.selector {
width: 500px;
height: 300px;
border: 1px solid #aaa;
position: relative;
display: flex;
justify-content: space-between;
.selector-left {
margin-top: 50px;
margin-left: 30px;
cursor: pointer;
}
.selector-right {
margin-top: 50px;
margin-right: 36%;
cursor: pointer;
}
.selector-line {
position: absolute;
top: 25px;
left: 50%;
width: 1px;
height: 200px;
background-color: #aaa;
}
.selector-line-btn {
position: absolute;
bottom: 50px;
width: 500px;
height: 1px;
background-color: #aaa;
& button {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 30px;
}
}
}
style>
那你处理 一下呗 sel值 push或者 处理时 。只保留 label值 。
letfTransfer 里 对 selectedTags 。再处理一下 。
let arr=[];
this. selectedTag.map((item)=>{
arr.push(item.label)
})
this.this. selectedTag=arr
你是想要显示成什么样的字符串