47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
||
<!-- 你的自定义受控组件-->
|
||
<div>
|
||
<el-tag class="many-to-many-tag" :type="randomType" v-for="(item,index) in data" :key="index">{{item}}</el-tag>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import {watch, ref} from "vue";
|
||
|
||
const props = defineProps({
|
||
modelValue: Array,
|
||
bindValue: Array,
|
||
displayLabel: {
|
||
type:String,
|
||
default: ""
|
||
}
|
||
})
|
||
|
||
// template上使用data
|
||
const data = ref()
|
||
watch(() => {
|
||
return props.bindValue
|
||
}, // 监听modelValue的变化，
|
||
(value) => {
|
||
const {displayLabel} = props
|
||
const result = value ? value.map((item: any) => {
|
||
return item[displayLabel]
|
||
}) : null
|
||
data.value = result
|
||
}, // 当modelValue值触发后，同步修改data.value的值
|
||
{immediate: true} // 立即触发一次，给data赋值初始值
|
||
)
|
||
|
||
const tagType = ['success', 'info', 'warning', 'danger']
|
||
const randomType = (): string => {
|
||
return tagType[Math.floor(Math.random() * tagType.length)];
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.many-to-many-tag{
|
||
margin-right: 5px;
|
||
}
|
||
.many-to-many-tag:last-child {
|
||
margin-right: 0;
|
||
}
|
||
</style>
|