avue实现一个json数组生成的表单效果示例代码-html代码-BFW代码库

avue实现一个json数组生成的表单效果示例代码

代码语言：html

代码描述：avue实现一个json数组生成的表单效果示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
</head>

<body>
    <div id="app">
        <avue-form ref="form" v-model="obj" :option="option">
            <template slot-scope="scope" slot="menuForm">
                <el-button >自定义按钮</el-button>
            </template>
        </avue-form>
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>
                Try Element
            </p>
        </el-dialog>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <!-- import JavaScript -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/avue.min.js"></script>



    <script>
        var DIC = {
            VAILD: [{
                label: '真',
                value: 'true'
            },
                {
                    label: '假',
                    value: 'false'
                }],
            SEX: [{
                label: '男',
                value: 0
            },
                {
                    label: '女',
                    value: 1
                }]
        }
        new Vue({
            el: '#app',
            data: function() {
                return {
                    visible: false,
                    form: {
                        text: '动态内容1'
                    },
                    obj: {},
                    sizeValue: ''
                }
            },
            computed: {
                option() {
                    return {
                        size: this.sizeValue,
                        mock: true,
                        submitText: '完成',
                        printBtn: true,
                        column: [{
                            label: "用户名",
                            prop: "username",
                            tip: '这是信息提示',
                            span: 8,
                            maxlength: 3,
                            suffixIcon: 'el-icon-tickets',
                            prefixIcon: 'el-icon-tickets',
                            minlength: 2,
                            mock: {
                                type: 'name',
                                en: true,
                            },
                            rules: [{
                                required: true,
                                message: "请输入用户名",
                                trigger: "blur"
                            }],
                            change: ({
                                value, column
                            })=> {
                                this.obj.address = value;
                                this.$message.success('address change')
                            },
                            click: ({
                                value, column
                            })=> {
                                this.$message.success('click')
                            }
                        },
                            {
                                label: "姓名",
                                prop: "name",
                                mock: {
                                    type: 'name'
                                },
                                span: 8
                            },
                            {
                                label: "类型",
                                prop: "type",
                                type: "select",
                                dicData: DIC.VAILD,
                                span: 6,
                                mock: {
                                    type: 'dic',
                                },
                            },
                            {
                                label: "权限",
                                prop: "grade",
                                span: 6,
                                type: "checkbox",
                                dicData: DIC.VAILD,
                                mock: {
                                    type: 'dic',
                                },
                            },
                            {
                                label: "开关",
                                prop: "switch",
                                span: 6,
                                type: "switch",
                             .........完整代码请登录后点击上方下载按钮下载查看