avue 表单大全示例代码-html代码-BFW代码库

avue 表单大全示例代码

代码语言：html

代码描述：avue 表单大全示例代码

代码标签：示例

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

<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">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/avue.css">

</head>
<body>
    <div id="app">
        <el-row style="margin-bottom:20px">
            <el-radio-group v-model="sizeValue">
                <el-radio label="small">默认</el-radio>
                <el-radio label="medium">medium</el-radio>
                <el-radio label="small">small</el-radio>
                <el-radio label="mini">mini</el-radio>
            </el-radio-group>
        </el-row>
        <avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit">
            <template slot-scope="scope" slot="menuForm">
                <el-button @click="tip">自定义按钮</el-button>
            </template>
        </avue-form>
    </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() {
                return {
                    obj: {},
                    sizeValue: 'small'
                }
            },
            computed: {
                option() {
                    return {
                        size: this.sizeValue,
                        mockBtn: true,
                        submitText: '完成',
                        printBtn: true,
                        labelPosition: "top",
                        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: "password",
                                type: 'password',
                                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",
                                dicData: DIC.SEX,
                                mock: {
                     .........完整代码请登录后点击上方下载按钮下载查看