若依框架 新增外键表单组件

外键表单组件

若依框架提供了下拉框组件,但是数据是枚举数据中读取,但是对于外键表单没有提供。定义一个TableTag

html 复制代码
<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中

javascript 复制代码
import TableTag from "@/components/TableTag";
Vue.component('TableTag',TableTag)
相关推荐
许商11 分钟前
【stm32】【printf】
java·前端·stm32
JIngJaneIL20 分钟前
智慧物业|物业管理|基于SprinBoot+vue的智慧物业管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·论文·智慧物业管理系统
爬坑的小白23 分钟前
vue 2.0 路由跳转时新开tab
前端·javascript·vue.js
爬坑的小白23 分钟前
vue x 状态管理
前端·javascript·vue.js
凌览38 分钟前
一键去水印|5 款免费小红书解析工具推荐
前端·javascript·后端
有意义38 分钟前
栈数据结构全解析:从实现原理到 LeetCode 实战
javascript·算法·编程语言
lichong95142 分钟前
鸿蒙 web组件开发
前端·typescript
1024小神42 分钟前
在html中使用js动态交换两个元素的位置
前端
鹿鹿鹿鹿isNotDefined43 分钟前
逐步手写,实现符合 Promise A+ 规范的 Promise
前端·javascript·算法
一千柯橘44 分钟前
Electron - IPC 解决主进程和渲染进程之间的通信
前端