Jeecg树形下拉框实践经验

引言

本文以jeecg-vue3为背景讲解树形下拉框的使用。 主要讲解在表单中如何设置，以及如何回显下拉的值。

步骤

• 属性配置

  export const formSchema: FormSchema[] = [
    {
      field: 'parentId',
      label: '上级菜单',
      component: 'TreeSelect',
      required: true,
      componentProps: {
        replaceFields: {
          title: 'name',
          key: 'id',
          value: 'id',
        },
        dropdownStyle:{
          maxHeight:'50vh'
        },
        //解决ant-design-vue select组件下拉框偏移错位
        getPopupContainer: (node) => node.parentNode
      },
      ifShow: ({values}) => !isDir(values.menuType),
    }

  ]

• 页面使用

<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :width="width" :title="getTitle" @ok="handleSubmit">
    <BasicForm @register="registerForm" class="menuForm"/>
  </BasicDrawer>
</template>


<script lang="ts" setup>
const [registerForm, {setProps,resetFields, setFieldsValue, updateSchema, validate,clearValidate}] = useForm({
    labelCol: {
        md: {span: 4},
        sm: {span: 6},
    },
    wrapperCol: {
        md: {span: 20},
        sm: {span: 18},
    }, 
    schemas: formSchema,
    showActionButtonGroup: false
  });

  const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
    await resetFields()
    setDrawerProps({confirmLoading: false});
    isUpdate.value = !!data?.isUpdate;
    menuType.value = data?.record?.menuType;

   //获取下拉树信息
    const treeData = await list();
    // 这个就是在抽屉弹窗初始化后，进行下拉值选择!!!!!
    updateSchema([{
      field: 'parentId',
      componentProps: {treeData},
    },{
      field: 'name',
      label: isButton(unref(menuType)) ? '按钮/权限' : '菜单名称'
    },{
      field: 'url',
      required: !isButton(unref(menuType))
    }]);

    // 无论新增还是编辑，都可以设置表单值
    if (typeof data.record === 'object') {
      let values = { ...data.record }
      setFieldsValue(values)
    }
    //禁用表单
    setProps({disabled:!attrs.showFooter})
  });

<script>