Vben，userform中的checkboxgroup数据渲染及选中

Vben，userform中的checkboxgroup数据渲染及选中

一、效果展示

二、使用步骤

1.数据格式

在看文档的时候可以看到checkboxgroup中渲染及绑定需要label以及value这两个值

2.获取数据及修改数据

通过后端接口，获取checkboxgroup需要渲染数据如下：

[
   { "label": "用户管理", "value": 3 },
   { "label": "后台用户管理","value": 8 },
   { "label": "Banner图管理","value": 15 },
   { "label": "优惠券管理","value": 19 },
   { "label": "定制管理", "value": 22 },
   { "label": "礼品卡管理", "value": 24 },
   { "label": "商品管理", "value": 27  },
   { "label": "积分商城管理","value": 37 },
   { "label": "客服聊天管理", "value": 41 },
   { "label": "订单管理", "value": 43},
   { "label": "打卡管理","value": 50 },
   { "label": "门店管理","value": 55},
   { "label": "系统管理", "value": 59 }
 ]

PS：后端大佬返回的数据并不是上图的数据，此时我是通过map方法返回了一个checkboxgroup所需要的数据在通过updateSchema表单方法将数据渲染上去

此时的界面如下：

三、渲染步骤

现在表单内容渲染好了，这时候就要获取该角色详细数据渲染

此时返回的permission权限字段是个字符串，咱们将他转换成数组渲染上去就好了，新数据如下：

获取数据并转换数据代码：

PS：提交数据给后端时再将permission转换成字符串就好了

四、全部代码

<template>
  <PageWrapper>
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
        margin-bottom: 6px;
      "
    >
      <a-button @click="resetFields">重置</a-button>
      <a-button type="primary" @click="validateForm">提交</a-button>
    </div>
    <CollapseContainer title="基础信息" class="mb-6">
      <BasicForm @register="register"></BasicForm>
    </CollapseContainer>
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, unref, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useGo } from '/@/hooks/web/usePage';
import { PageWrapper } from '/@/components/Page';
import { CollapseContainer } from '/@/components/Container';
import { BasicForm, useForm } from '/@/components/Form/index';
import { Button } from '/@/components/Button';
import { useMessage } from '/@/hooks/web/useMessage';
import { Tinymce } from '/@/components/Tinymce/index';
import { getRoleDetails, postRoleDetails } from '/@/api/member/details';
import { getPermissionList} from '/@/api/member';

export default defineComponent({
  components: {
    PageWrapper,
    CollapseContainer,
    BasicForm,
    Button,
    Tinymce,
  },
  setup() {
    const go = useGo();
    const { currentRoute } = useRouter();
    const test = ref();
    // 动态
    const params = unref(currentRoute).params;
    const { createMessage } = useMessage();
    const [
      register,
      {
        updateSchema,
        validateFields,
        resetFields,
        setFieldsValue,
      },
    ] = useForm({
      labelWidth: 120,
      schemas: [
        {
          field: 'id',
          label: 'id',
          required: true,
          defaultValue: 0,
          component: 'InputNumber',
          show: false,
        },
        {
          field: 'name',
          component: 'Input',
          label: '用户名称',
          colProps: {
            span: 20,
          },
          componentProps: {
            placeholder: '请输入用户名称',
          },
          required: true,
        },
        {
          field: 'value',
          component: 'Input',
          label: '真实名称',
          colProps: {
            span: 20,
          },
          componentProps: {
            placeholder: '请输入用户名称',
          },
          required: true,
          show: false,
        },
        {
          field: 'permission',
          component: 'CheckboxGroup',
          label: '角色权限',
          colProps: {
            span: 20,
          },
        },
        {
          field: 'status',
          component: 'Switch',
          label: '角色状态',
          colProps: {
            span: 20,
          },
          required: true,
        }
      ],
      // submitButtonOptions: { text: '提交' },
      showActionButtonGroup: false,
    });
       //获取后端数据
        getPermissionList({
          page: 1,
          pageSize:99
        }).then((msg: any) => {
          msg=msg.list.map((item: { title: any; id: any; }) => ({ label: item.title, value: item.id}))
          updateSchema({
            field: 'permission',
            componentProps: { options: msg },
          });
          getRoleDetails({
            id: params.id,
          }).then((res: any) => {
            if(res.permission!=undefined){
              res.permission = res.permission.split(',')
              res.permission = res.permission.map((item: number) => {
                  if (!isNaN(item - 0)) { 
                    return item - 0;
                  } else {
                    return item;
                  }
                });
            }
            setFieldsValue(res);
            test.value = res;
          });
        });
        
    // 提交
    const validateForm = async () => {
      try {
        const values = await validateFields();
        values.permission=values.permission.join()
        postRoleDetails({
          ...values,
        }).then((res: any) => {
          createMessage.success('提交成功');
          go(`/member/juese`);
        });
      } catch (error) {
        createMessage.error('系统错误，请稍后重试');
      }
    };
    const handleChange = (value: string) => {
      console.log(value);
    };
    return {
      register,
      resetFields,
      validateForm,
      handleChange,
    };
  },
});
</script>
 

总结

        上面是我处理这部分业务所需要的代码，转换数据并渲染表单组件的内容，再将permission中的值绑定在checkboxgroup中