外键表单组件
若依框架提供了下拉框组件,但是数据是枚举数据中读取,但是对于外键表单没有提供。定义一个TableTag
<template>
<div>
<template v-for="(item, index) in options" >
<template >
<span
v-if="value==item.id"
>{{ item[label] }}</span
>
</template>
</template>
</div>
</template>
<script>
export default {
name: "TableTag",
props: {
options: {
type: Array,
default: null,
},
value: [Number, String, Array],
label: {
type: String,
default: "displayName",
},
},
computed: {
values() {
console.log(Array.isArray(this.value) ? this.value : [String(this.value)])
if (this.value !== null && typeof this.value !== 'undefined') {
return Array.isArray(this.value) ? this.value : [String(this.value)];
} else {
return [];
}
},
},
};
</script>
<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
}
</style>
main.js中
import TableTag from "@/components/TableTag";
Vue.component('TableTag',TableTag)