element根据后台返回的数据动态加载表单及对应的验证规则

最新推荐文章于 2023-12-06 17:42:42 发布
最新推荐文章于 2023-12-06 17:42:42 发布
阅读量1.9k 收藏 10
点赞数 1
分类专栏： ElementUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37780367/article/details/104781013
版权
本文介绍了一个基于Vue框架的复杂表单组件实现，详细展示了如何使用Element UI库进行表单元素的创建与数据双向绑定，同时包含了各种类型输入字段的验证规则设置，如文本、数字、日期时间、下拉选择、单选、多选、文件上传等，并提供了完整的HTML、JavaScript代码示例。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>

<body>
    <div id="app">
        <el-form ref="data" :model="data" label-position="left" :rules="rules" status-icon>
            <el-form-item v-for="(item, index) in data.formList" :label="item.ENAME" :key="item.EID" status-icon
                :prop="'formList.' + index + '.VALUE'" :rules="item.RULES.formInlineVal">
                <template v-if="item.ETYPE == 1">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 2">
                    <el-input v-model.number="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 3">
                    <div class="block">
                        <el-date-picker v-model="item.VALUE" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                </template>

                <template v-if="item.ETYPE == 4">
                    <el-select v-model="item.VALUE" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </template>

                <template v-if="item.ETYPE == 5">
                    <el-radio-group v-model="item.VALUE">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </template>

                <template v-if="item.ETYPE == 6">
                    <el-checkbox-group v-model="item.VALUE">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </template>

                <template v-if="item.ETYPE == 9">
                    <el-input v-model="item.VALUE" type="textarea" placeholder="请输入">
                    </el-input>
                </template>

                <template v-if="item.ETYPE == 10">
                    <el-input type="password" v-model="item.VALUE" autocomplete="off"></el-input>
                </template>

                <template v-if="item.ETYPE == 16">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 36">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 17">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 18">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 19">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 20">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 21">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 23">
                    <el-input v-model="item.VALUE"></el-input>
                </template>

                <template v-if="item.ETYPE == 7">
                    
                    <el-upload class="upload-demo" ref="upload" :action="saveMeals" :file-list="item.VALUE"
                        :on-remove="handleRemove" :before-upload="beforeUpload" name="meals" accept="file/*"
                        :on-change="fileChange" :on-success="handleUploadSuccess" :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button size="medium" type="success" @click="submitUpload(item.VALUE)">
                            <i class="el-icon-upload el-icon--right"></i>上传到服务器
                        </el-button>
                    </el-upload>
                </template>

            </el-form-item>

            <el-form-item style="text-align: center;margin-top: 10px;">
                <el-button type="primary" @click="submitForm('data')">提交</el-button>
                <el-button @click="resetForm('data')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {

                //密码
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        callback();
                    }
                };
                //手机号验证
                var checkCellPhone = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('手机号不能为空'));
                    } else {
                        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                        if (reg.test(value)) {
                            callback();
                        } else {
                            return callback(new Error('请输入正确的手机号'));
                        }
                    }
                };
                //座机号验证
                var checkTelePhone = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('座机号不能为空'));
                    } else {
                        const reg = /^(\d{3,4}-)?\d{7,8}$/;//座机和传真格式是一样的：区号-号码
                        if (reg.test(value)) {
                            callback();
                        } else {
                            return callback(new Error('请输入正确的座机号'));
                        }
                    }
                };

                //金额验证
                var checkPrice = (rule, value, callback) => {


                    if (!value) {
                        return callback(new Error('金额不能为空'));
                    } else {
                        const rgx = /(^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d{1,2})?$)/;
                        if (value.match(rgx) == null) {
                            return callback(new Error('请检查输入格式，不能为空，且最多两位小数'))
                        } else {
                            callback();
                        }
                    }
                };

                //身份证号验证
                var checkID = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('身份证号不能为空'));
                    } else {
                        const reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
                        if (reg.test(value)) {
                            callback();
                        } else {
                            return callback(new Error('请输入正确的身份证号'));
                        }
                    }
                };

                //IP验证
                var checkCodeIp = (rule, value, callback) => {
                    const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('输入格式不合法！'));
                    }
                };
                return {
                    data: {
                        formList: [],    //存放表单数据
                        myFileList: [],
                    },
                    rules: {    //表单校验规则
                        text: [
                            { required: 1, message: '请输入名称', trigger: 'blur' },
                            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ],
                        number: [
                            { required: 1, message: '数字不能为空' },
                            { type: 'number', message: '必须为数字值' }
                        ],
                        datetime: [
                            { type: 'date', required: 1, message: '请选择时间', trigger: 'change' }
                        ],
                        select: [
                            { required: 1, message: '请选择', trigger: 'change' }
                        ],
                        radio: [
                            { required: 1, message: '请选择', trigger: 'change' }
                        ],
                        checkbox: [
                            { type: 'array', required: 1, message: '请至少选择一个', trigger: 'change' }
                        ],
                        textarea: [
                            { required: 1, message: '请输入内容', trigger: 'blur' }
                        ],
                        password: [
                            { required: 1, validator: validatePass, trigger: 'blur' }
                        ],
                        curruser: [
                            { required: 1, message: '请输入', trigger: 'blur' },
                        ],
                        currTenant: [
                            { required: 1, message: '请输入', trigger: 'blur' },
                        ],
                        email: [
                            { required: 1, message: '请输入邮箱地址', trigger: 'blur' },
                            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                        ],
                        cellphone: [
                            { required: 1, trigger: 'blur', validator: checkCellPhone }
                        ],
                        telephone: [
                            { required: 1, trigger: 'blur', validator: checkTelePhone }
                        ],
                        money: [
                            { required: 1, trigger: ['blur', 'change'], validator: checkPrice },
                        ],
                        ID: [
                            { required: 1, trigger: ['blur', 'change'], validator: checkID },
                        ],
                        IP: [
                            { required: 1, message: 'IP不能为空', trigger: 'blur' },
                            { validator: checkCodeIp, trigger: 'blur' }
                        ],
                        file: [
                            { required: 1, message: '请选择上传', trigger: 'change' }
                        ]

                    }
                }
            },
            methods: {
                init: function () {     //初始化加载数据
                    var that = this;
                    $.ajax({
                        type: "get",
                        url: "",
                        cache: false,
                        async: false,
                        dataType: "JSON",
                        success: function (data) {

                        },
                        error: function (data) {

                        }
                    });

                    var temp = [{ 'ENAME': '申请人', 'EID': 'SHENQINGREN', 'DICT_ID': '', 'REQUIRED': '0', 'ETYPE': '1' },
                    { 'ENAME': '申请原因', 'EID': 'SHENQINGYUANYIN', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '2' },
                    { 'ENAME': '计划开始时间', 'EID': 'STARTTIME', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '3' },
                    { 'ENAME': '计划结束时间', 'EID': 'ENDTIME', 'DICT_ID': '', 'REQUIRED': '0', 'ETYPE': '3' },
                    { 'ENAME': '下拉框', 'EID': 'SELECT', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '4' },
                    { 'ENAME': '单选', 'EID': 'RADIO', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '5' },
                    { 'ENAME': '多选', 'EID': 'CHECKBOX', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '6' },
                    { 'ENAME': '多行输入', 'EID': 'TEXTAREA', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '9' },
                    { 'ENAME': '密码', 'EID': 'PASSWORD', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '10' },
                    { 'ENAME': '当前用户', 'EID': 'CURRUSRE', 'DICT_ID': '', 'REQUIRED': '0', 'ETYPE': '16' },
                    { 'ENAME': '当前租户', 'EID': 'CURRTENANT', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '36' },
                    { 'ENAME': '邮箱', 'EID': 'EMAIL', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '17' },
                    { 'ENAME': '手机号', 'EID': 'CELLPHONE', 'DICT_ID': '', 'REQUIRED': '0', 'ETYPE': '18' },
                    { 'ENAME': '座机号', 'EID': 'TELEPHONE', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '19' },
                    { 'ENAME': '金额', 'EID': 'MONEY', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '20' },
                    { 'ENAME': '身份证号', 'EID': 'ID', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '21' },
                    { 'ENAME': 'IP地址', 'EID': 'IP', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '23' },
                    { 'ENAME': '文件上传', 'EID': 'FILE', 'DICT_ID': '', 'REQUIRED': '1', 'ETYPE': '7' },
                    ];

                    for (var i = 0; i < temp.length; i++) {     //对初始数据加工，挂上对应rule
                        switch (temp[i].ETYPE) {
                            case '1':   //text
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'text');
                                break;
                            case '2': //number
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'number');
                                break;
                            case '3': //datetime
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'datetime');
                                break;
                            case '4': //select
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'select');
                                break;
                            case '5': //radio
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'radio');
                                break;
                            case '6': //checkbox
                                temp[i].VALUE = [];
                                that.addRules(temp[i], 'checkbox');
                                break;
                            case '9': //textarea
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'textarea');
                                break;
                            case '10': //password
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'password');
                                break;
                            case '16': //curruser
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'curruser');
                                break;
                            case '36': //currTenant
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'currTenant');
                                break;
                            case '17': //email
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'email');
                                break;
                            case '18': //cellphone
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'cellphone');
                                break;
                            case '19': //telephone
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'telephone');
                                break;
                            case '20': //money
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'money');
                                break;
                            case '21': //ID
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'ID');
                                break;
                            case '23': //IP
                                temp[i].VALUE = '';
                                that.addRules(temp[i], 'IP');
                                break;
                            case '7': //file
                                debugger
                                temp[i].VALUE = [];
                                temp[i].saveMeals = '';
                                that.addRules(temp[i], 'file');
                                break;
                        }
                    }
                    that.data.formList = temp;
                    console.log(that.data.formList);

                },
                addRules: function (obj, type) {    //组装rules数据格式
                    var that = this;
                    var arr = [];
                    obj.REQUIRED = obj.REQUIRED ^ 1;    //0、1互转
                    $.each(that.rules[type], function (i, val) {
                        val.required = obj.REQUIRED
                        arr.push(val);
                    });
                    obj.RULES = new Object();
                    var formInlineVal = arr;
                    obj.RULES.formInlineVal = formInlineVal;
                },
                submitForm(formName) {  //点击提交按钮调用
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {   //点击重置按钮 清空表单信息
                    this.$refs[formName].resetFields();
                },
                //上传文件相关方法
                beforeUpload(file) {//文件上传前的钩子函数
                    debugger
                    console.log('file>>>>>');
                    console.log(file);

                },
                submitUpload(val) {//上传
                    if (this.myFileList == null || this.myFileList == '') {       //判断当前是否有上传文件
                        this.$message({ type: 'error', message: "请选择文件！" })
                        return false;
                    } else {
                        console.log('this.myFileList>>>>>');
                        console.log(this.myFileList);

                        var fileData = this.myFileList[0];
                        val.push(fileData);//VALUE字段灌入上传的文件信息数据
                        console.log('上传服务器>>>>');
                        console.log(this.data.formList);
                        this.$refs.upload.submit();

                        $.ajax({
                            type: "post",
                            url: "",
                            data: fileData,
                            contentType: false,//这里不能少
                            dataType: 'json',
                            success: function (data) {

                            },
                            error: function (error) {
                            }
                        });
                    }
                },
                // 上传成功的钩子函数
                handleUploadSuccess(response, file, fileList) {
                    this.$refs.upload.clearFiles();//移除文件，防止重复上传
                    this.$message(response);//显示上传结果
                },

                handleRemove() {//移除文件
                    this.myFileList = [];
                },
                fileChange(file, fileList) {//限制只能选中一个文件
                    this.myFileList = fileList.slice(-1); //获取当前上传文件数据
                }
            },
            mounted: function () {
                this.init();    //初始化加载表单数据
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

vue+element实现动态添加非空验证效果
guo_123258的博客
09-27 2793
在工作中遇到了这样的需求，要求实现在页面上选择某个选项后，查找后台配置表来判断某几个字段是否必填，如果必填，则修改rules验证规则，添加{required:true}，必填要求。 实现思路： 根据要求，只需要在rules中对应字段名称添加"required:true" 即可。观察到rules是一个对象结构数据，可以使用ES6语法修改动态修改数据。基本结构如下： rules...
element:常见用法总结（前后台常见问题与自定义表单验证）
tomorrownan的博客
09-11 1711
后台给的状态是使用12345状态码表示的，前端要把它转成对应的状态文字。 这里使用element-ui的table为例，代码如下： <el-table-column label="审核结果" align="center"> <template slot-scope="scope"> <span v-if="scope.row.authStatus === ...
vue----根据后台返回字段自动生成表单列表.zip
09-29
根据字段格式自动显示不同类型的表单数据、可以进行表单的动态显示、里面有静态数据的显示，也有根据后台返回的字段，对相应的字段进行绑定、界面显示。动态生成不同显示方式的表单
根据后端接口返回数据，动态展示并验证element表单项的一个思路
xiaoboxiaoxing的博客
09-02 1450
代码如下 <template> <div class=""> <tips :tips="tips" /> <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" size="medium" style="width:400px" class="demo-ruleForm"> <el-form-item v-f
vue+elementUI下拉框动态添加校验
qq_30198507的博客
10-31 3780
击工单类型给问题类型或者需求类型下拉框添加rules验证，已选择立即触发校验或者点击提交按钮才触发校验
ElementUI 实现动态表单数据校验（已解决）
热门推荐
qq_49002903的博客
07-26 1万+
日常问题记录：ElementUI 实现动态表单数据校验（已解决）
element label动态赋值_ElementUI cascader级联动态加载及回显
weixin_39863741的博客
11-29 2204
先看图，你是否也遇到这个需求？如果你正在焦头烂额，无脑抓瞎，那么你来对地方了，因为我将给你一个简单易懂的实现方案。我也在网上翻了无数页答案，也照着别人的代码和思路尝试了，事实上并不能解决我这个棘手的问题。级联下拉选多选、懒加载、数据回显，尽管 ElementUI 已经很贴心，文档写的也很好。前两个很容易就可以实现，可是唯独数据回显被遗忘了，似乎忘记了数据回显应该是级联选择器必备的功能，很遗憾，需要...
Vue+ElementUI实现表单动态渲染、可视化配置的方法
11-29
通过这种方式，我们可以根据后台传递的JSON数据动态生成不同的表单结构，从而适应多种业务场景。 首先，理解动态渲染的核心在于将JSON数据转换为实际的HTML元素。在本例中，JSON数据包含了一个`formConfig`对象，它...
vue+elementUI 复杂表单的验证、数据提交方案问题
10-16
5. 最后，submitForm方法中，通过调用Element UI的validate方法，触发表单验证流程，并收集数据、调用对应的提交函数来完成数据提交。 实际上，这种分离组件的方案能够很好地解决表单复杂性带来的问题，提高了代码...
Element UI表单设计及代码生成器
最新发布
06-09
Element UI表单设计及代码生成器是一个强大的工具，专为基于Vue.js和Element UI的Web应用开发者设计。这个工具能够帮助开发者快速构建交互式的表单界面，极大地提升了开发效率和用户体验。通过图形化的表单设计界面...
element-ui table 页面加载时，动态渲染后台传过来的数据（springmvc） jsp页面
abc1498880402的博客
10-14 1190
element-ui table 页面加载时，动态渲染后台传过来的数据（springmvc） jsp页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() +
element之el-table动态表格随机列（根据后端返回的数据确定要展示的列）+ 前端分页（后端返回所有数据前端自行分页）
qq_73231057的博客
10-31 659
1.数据结构依赖后端，也可以自己组装，就是有一丢丢小麻烦，话不多说看代码....
js结合后台返回参数，动态控制各列数据展示
NullException
05-17 2053
效果图：     08:00~21:30 这样的列是动态生成的，如果某一个时间段属于工作时间段，则合并，否则设置为默认“闲”。 //全局变量声明 var global_per=30;//每30分钟一个刻度 var global_start_time='08:00'; var global_end_time='21:30'; //初始化 设置时间刻度 var i
el-form-item表单根据后台返回的数据项展示校验错误信息
monkey7
12-06 1557
el-form error属性 动态设置表单验证状态变为error 红框高亮 并显示错误信息
axios+vue+element-ui以服务端方式动态加载loading
qq_34825875的博客
03-15 7088
最近在开发公司的后台界面，因为要前后端分离，所以就用了Vue这个非常火的框架，前端界面就用的饿了么团队的开源组件element-UI，界面非常看好，设计的也挺人性化，大大缩短了前端开发周期。但这今天遇到个问题，就是当我点击侧边栏的选项时，右侧根据api渲染的数据有一个3秒钟的延迟，恐怕像我这种强迫症的人忍受不了的，所以就看到了，element-ui中的loading加载动画，通过loading来占...
element-ui中el-form自定义验证（调用后端接口）
HoShining日志
10-19 5621
需求 在输入项目名称后，调用后端接口isNameOnly，若已存在，则效果如下图： 先设置校验规则rules <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 在return中定义 // 判定规则 rules: { taskName: [{
动态循环的el-form做用户角色所属表单验证
weixin_56663184的博客
04-13 699
上图我们只针对表格中某某部门的验证，form表单根据实际情况（后端返回数据中部门的个数）做动态渲染，这里注意form在for循环种嵌套，所以渲染结构必定有多个form，好在表单每一项的验证规则相同 1、后端数据结构 let evaluationQuery = { "code": 200, "success": true, "data": { "id": "1510177245100482561", "tenantId": "", ...
element-ui根据返回数据动态生成表格
hql1024的博客
11-21 2953
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/v...
vue ＜el-form＞用正则表达式简单验证用户录入数据
浮萍的博客
11-10 766
rules: { location: [ // { required: true, message: "档案存放位置必填", trigger: "blur" }, { required: true, pattern: /^\d{1,2}-\d{1,2}-\d{1,2}-\d{1,2}-\d{1,2}/, message: "档案位置错误", ...
Vue3与Element-Plus搭建动态管理后台模板
- **管理员后台模板**：在给定文件中，Element Plus被用来搭建管理员后台模板，这意味着它为后台管理页面提供了必要的UI元素，如按钮、表单、表格、导航栏等。 - **组件特性**：Element Plus的组件都遵循Vue 3的响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值