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>

效果：

修改前：

 修改后;