跳到主要内容

JLinkTableCard 关联记录 ✔

组件参数​

参数类型必填说明
valueFieldstring是value 字段（存储到表单的字段名，通常为 id）
textFieldstring是显示字段，多个字段用逗号分隔，第一个字段作为卡片主标题，其余作为副内容
tableNamestring是关联表名
queryModestring否查询模式，默认 online。可选值：online（仅 Online 表单配置的表）、table（数据库任意表） 自 2026-05-28 起支持
multiboolean否是否支持多选，默认 false
valuestring/number否选中的值
disabledboolean否是否禁用，默认 false
detailboolean否是否为详情只读页面，默认 false
imageFieldstring否图片字段名，配置后卡片右侧显示图片（支持多图时取第一张）
linkFieldsarray否联动字段配置，格式 ["表单字段,关联表字段"]，选中后自动填充其他表单项

注意：table 模式自 2026-05-28 起支持,不依赖 Online 表单，直接通过系统字典接口查询数据库表数据，适合关联系统内置表。

table 模式白名单配置​

table 模式下，后端会校验目标表是否在表白名单中，未配置的表将被拒绝查询。白名单详细说明参见：表白名单配置

效果展示​

示例一：online 模式（关联 Online 表单的表）​

默认模式，tableName 必须是在 Online 表单中已配置的表名。

<template>
  <BasicForm
    :schemas="schemas"
    :actionColOptions="{ span: 24 }"
  >
  </BasicForm>
</template>
<script setup lang="ts">
  const schemas = [
    {
      field: 'link',
      component: 'JLinkTableCard',
      label: 'JLinkTableCard 示例（online 模式）',
      colProps: { span: 12 },
      componentProps: {
        valueField: 'id',
        textField: 'name,price,xiala',
        tableName: 'uniapp_test_control',
        // queryMode 默认为 'online'，可省略
      },
    },
  ];
</script>

示例二：table 模式（关联数据库任意表）​

适用于关联系统内置表或其他未配置 Online 表单的普通数据库表。设置 queryMode: 'table' 即可，无需在 Online 表单中预先配置该表。

<template>
  <BasicForm
    :schemas="schemas"
    :actionColOptions="{ span: 24 }"
  >
  </BasicForm>
</template>
<script setup lang="ts">
  const schemas = [
    {
      field: 'userId',
      component: 'JLinkTableCard',
      label: '关联用户（table 模式）',
      colProps: { span: 24 },
      componentProps: {
        queryMode: 'table',       // 关键：指定 table 模式
        tableName: 'sys_user',       // 数据库表名（无需 Online 表单配置）
        valueField: 'id',            // 存储字段
        textField: 'realname,username,sex',  // 显示字段，逗号分隔，第一个为主标题
        imageField: 'avatar',        // 图片字段（可选）
        multi: true,                 // 是否多选
      },
    },
  ];
</script>

在 *.data.ts 中配置（FormSchema 方式）​

import { FormSchema } from '/@/components/Table';

export const formSchema: FormSchema[] = [
  {
    field: 'userId',
    label: '关联用户',
    component: 'JLinkTableCard',
    required: true,
    componentProps: {
      queryMode: 'table',
      tableName: 'sys_user',
      valueField: 'id',
      textField: 'realname,username,sex',
      imageField: 'avatar',
      multi: true,
    },
  },
];

在列表翻译配置​

1.方式一：可直接使用表字典方式后端翻译

2.方式二：可在前端接口请求完，走一次查询逻辑去翻译