vbenAdmin 标准ts表单使用render 插槽：树形图ant

本文链接：https://blog.youkuaiyun.com/weixin_48315912/article/details/125657741

本文介绍了如何在vbenAdmin项目中利用typescript（TS）处理标准表单，并结合Ant Design的Tree组件，通过render插槽实现自定义渲染。内容包括xxx.data.ts的数据结构和renderList.vue组件的实现细节，展示了前端开发中动态表单与树形图的交互应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xxx.data.ts文件，

 {
    field: 'productValue',
    label: '关联设备',
    component: 'Input',
    render: ({ model, field }) => {
      if (model[field]) {
        return h(renderList, {
          value: model[field],
          onChange: (e: any) => {
            model[field] = e;
          },
        });
      }
      return '';
    },
    // required: true,
  },

renderList.vue 文件

<template>
  <div>
    <BasicTree
      title="设备列表"
      v-model:value="getPropsValue"
      toolbar
      checkable
      search
      :treeData="treeData"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick, ref, watch } from 'vue';
  import { getDeviceListTree } from '/@/api/device/deviceList';
  import { BasicTree, TreeItem } from '/@/components/Tree/index';
  import { cloneDeep } from 'lodash-es';

  export default defineComponent({
    name: 'RenderList',
    components: {
      BasicTree,
    },
    props: {
      value: {
        type: Array as () => string[],
        default: () => [],
      },
    },
    emits: ['change'],
    setup(props, context) {
      const getPropsValue = ref<string[]>([]);
      let treeData = ref<TreeItem[]>([]);
      let modelOptions;
      getDevice();
      async function getDevice() {
        const res = await getDeviceListTree();
        modelOptions = res.map((item) => {
          const children = item.list.map((items) => {
            items.productValue = items.productValue + '';
            const { productValue: key, name: title } = items;
            return {
              key,
              title,
            };
          });
          const { modelName: title, modelName: key } = item;
          const modelOptionsItem = { title, key, children };
          return modelOptionsItem;
        });
        nextTick(() => {
          treeData.value = cloneDeep(modelOptions);
          getPropsValue.value = props.value;
        });
      }
      watch(getPropsValue, () => {
        context.emit('change', getPropsValue.value);
      });

      return {
        treeData: treeData,
        getPropsValue,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-image-preview';

  .@{prefix-cls} {
    .ant-image {
      margin-right: 10px;
    }

    .ant-image-preview-operations {
      background-color: rgb(0 0 0 / 40%);
    }
  }
</style>