vue3 vue3-form-element表单生成工具 数组中 修改加号的位置

JSON schema数据

export default {
    "type": "object",
    "properties": {
        "listOfStrings": {
            "type": "array",
            "title": "A list of strings",
            "ui:options": {
                "fieldClass": {
                    // 0.1.0 版本添加
                    // 通过 vue render函数 class 传递给 Field 组件，支持所有field节点
                    'fieldClass': true // 自定义样式
                },
            },
            "items": {
                "title": "Input string",
                "type": "string",
                "default": "bazinga"
            }
        },
   
    }
}

 

在vue中定义css类

<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <div style="overflow-y: auto;">
                {{ formData }}
                <VueForm v-model="formData" :schema="schema" :formProps="formProps"
                    @submit="handleSubmit">
                </VueForm>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
//  使用
import VueForm from "@lljj/vue3-form-element";
// import testSchema from "./jsonschema.ts";
// import userSchema from "./demochema";
import userSchema from "./index";

// 表单数据
const formData = ref({});
const schema = ref(userSchema);

const formProps = ref({
    layoutColumn: 2,
    labelPosition: "left",
    labelWidth: "180px",
    labelSuffix: "：",
});

// 表单提交
const handleSubmit = (data: any) => {
    console.log(data);
};
</script>
<style lang="scss" scoped>
:deep(.el-input) {
    width: 100%;
}

.el-form :deep(.el-form-item:last-of-type) {
    border: 0 !important;
}

:deep(.fieldClass .fieldGroupWrap_box .arrayOrderList) {
    display: flex;
    flex-direction: column;

}

:deep(.fieldClass .fieldGroupWrap_box .arrayOrderList_bottomAddBtn) {
    order: -1;
    /* 负值会排在所有默认order(0)元素前面 */
    // margin-bottom: 16px;
    /* 增加一点下边距与列表项分隔 */
}

/* 保持列表项原有的顺序和布局 */
:deep(.fieldClass .fieldGroupWrap_box .arrayOrderList_item) {
    order: 0;
    // margin-bottom: 8px;
    /* 可根据需要调整列表项间距 */
}
</style>

效果：

修改前：

 修改后;