ElementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
组件

1.Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

elementui固定宽度布局 elementui布局案例_elementui固定宽度布局


就是这样分了24个格子

基础布局

使用单一分栏创建基础的栅格布局。
通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

分栏间隔

分栏之间存在间隔。
Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

分栏偏移

支持偏移指定的栏数。
通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-row {
            margin-bottom: 20px;
        }
    
        .el-col {
            border-radius: 4px;
        }
    
        .bg-purple-dark {
            background: #99a9bf;
        }
    
        .bg-purple {
            background: #d3dce6;
        }
    
        .bg-purple-light {
            background: #e5e9f2;
        }
    
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
    
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-row :gutter="20">
            <el-col :span="3"><div class="grid-content bg-purple-dark"></div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple-dark"></div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
            
        </el-row>
        <el-row>
            <el-col :span="3">
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="12" >
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        
        </el-row>
        <el-row>
            <el-col :span="3" :offset=2>
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        </el-row>
        
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
    </div>
    <!-- 引入组件库 -->
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    visible: false
                }
            },
        })
    </script>
</body>

</html>

elementui固定宽度布局 elementui布局案例_elementui固定宽度布局_02

2.Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-menu :default-active="active" mode="horizontal">
            <!-- 加冒号和不加冒号,都是属性，一个属性的属性值是外部传进来的值，data区域的1值(data传入的也就是加冒号)，一个是属性是固定值直接写不加冒号 都是属性-->
            <!-- mode水平菜单 -->
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">新闻</el-menu-item>
            <el-menu-item index="3">论坛</el-menu-item>
            <el-submenu index="4">
                <template slot="title">常用功能</template>
                <el-menu-item index="4-1">选项1</el-menu-item>
                <el-menu-item index="4-2">选项2</el-menu-item>
                <el-menu-item index="4-3">选项3</el-menu-item>
                <el-submenu index="4-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="4-4-1">选项1</el-menu-item>
                    <el-menu-item index="4-4-2">选项2</el-menu-item>
                    <el-menu-item index="4-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
        <el-container>
            <!-- <el-header>顶部</el-header> -->
            <el-aside>
                <el-menu default-active="2">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                Hello element-ui
            </el-main>
            <!-- <el-footer>底部</el-footer> -->
        </el-container>
    </div>
    <!-- 引入组件库 -->
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    active: "1"
                }
            },

        })
    </script>
</body>

</html>

elementui固定宽度布局 elementui布局案例_elementui固定宽度布局_03

3.Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-table :data="tableData">
            <el-table-column prop="name" label="栏目名称">
            </el-table-column>
            <el-table-column prop="desc" label="栏目描述">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="medium">查看</el-button>
                    <el-button type="primary" size="small">编辑</el-button>
                    <el-button type="primary" size="mini">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [{
                        name: "新闻",
                        desc: "娱乐新闻",

                    }, {
                        name: "新闻",
                        desc: "体育新闻",

                    }]
                }
            },

        })
    </script>
</body>

</html>

elementui固定宽度布局 elementui布局案例_html_04

4.行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="栏目名称"> 
                <el-input placeholder="栏目名称" size="small" v-model="searchForm.name"></el-input>
            </el-form-item>
            
            <el-form-item >
                <el-button size="small" @click="search">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" size="small" @click="add">新增</el-button>
       <!-- 这里:data属性 是用来显示数据的  tabledata则绑定值 在每一行中 prop这是这行数据的键 每一个键对应一个值 name:10001，desc:"新闻",name:"娱乐新闻"-->
        <el-table :data="tableData">
            <el-table-column prop="name" label="栏目名称">
            </el-table-column>
            <el-table-column prop="desc" label="栏目描述">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <!-- 可以表示项目名称和项目描述下的那一行数据 -->
                <template slot-scope="rowData">
                    <el-button type="primary" size="small" @click="edit(rowData.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(rowData.row.id)">删除</el-button>
                   
                </template>
            </el-table-column>
        </el-table>

        <el-pagination 

            prev-text="上一页"
            next-text="下一页"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 40]" 
            :page-size="size" 
            :total="total"
            layout="total, sizes, prev, pager, next, jumper" 
            >
        </el-pagination>

        <!-- :visible.sync  表示是否显示对话框 这里面的属性值dialogFormVisible 来控制是否显示对话框-->
        <el-dialog title="新增栏目" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-position="left" label-width="80px" :model="formData">
                <el-form-item label="栏目名称">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="栏目描述">
                    <el-input v-model="formData.desc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" >
                <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="save" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script>
        let vm=new Vue({
            el: '#app',
            data() {
                return {
                    current: 1,
                    size: 10,
                    total: 35,
                    dialogFormVisible: false,
                    tableData: [{
                        id: 1001,
                        name: "新闻",
                        desc: "娱乐新闻",

                    }, {
                        id:1002,
                        name: "新闻",
                        desc: "体育新闻",

                    }],
                    formData :{
                        id: '',
                        name: '',
                        desc: '',
                    },
                    searchForm :{
                        name: '',

                    }
                }
            },
            methods: {
                search: function(){
                    
                },
                add: function () {
                    this.dialogFormVisible = true;
                },
                edit: function(row){
                   // console.log(row);
                    this.dialogFormVisible = true;   
                //    this.formData =row;
                    this.formData.name =row.name;
                    this.formData.desc =row.desc;
                },
                save: function(){
                    //1.提交到到后台
                    //2.上对话框隐藏
                    this.dialogFormVisible = false;
                },
                del: function(id){
                    console.log(id);
                    // 这里是this是vm对象 只是elementui将this对象的功能进行继承一样扩展
                    this.$confirm('确认删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            showClose: true,
                            message: '删除成功!',
                            // onClose: function(){
                            //     alert()
                            // }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                //一页显示的数据条数发生改变的时候触发
                handleSizeChange: function(){
                    console.log("handleSizeChange")
                },
                //页码发送改变的时候触发
                handleCurrentChange: function(){
                    console.log("handleCurrentChange")
                }
            },

        })
    </script>
</body>

</html>

elementui固定宽度布局 elementui布局案例_javascript_05

5.表单校验

el开头的东西通通为组件

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <!-- :rules属性用于表单校验 -->
        <!-- 表单是在组件内部，但是method：submit(forName)定义在组件外 所以传进去对应表单名称 这样方法才能找到这个表单  -->
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-position="right" label-width="80px">
            <!-- 数据校验和prop有关,而不是v-model在标签el-form-item中 -->
            <el-form-item label="活动名称"  prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="area">
                <el-select placeholder="请选择活动区域" v-model="formData.area">
                    <el-option label="上海" value="sh"></el-option>
                    <el-option label="北京" value="bj"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间" prop="datetime">
                <el-date-picker type="datetime" placeholder="选择日期" v-model="formData.date" value-format="yyyy-MM-dd" ></el-date-picker>             
            </el-form-item>
            <el-form-item label="即时配送" prop="switch">
                <el-switch v-model="formData.switch"></el-switch>
            </el-form-item>

            <el-form-item label="活动性质" prop="type">
                <el-checkbox-group v-model="formData.type">
                    <el-checkbox label="1" >美食/餐厅线上活动</el-checkbox>
                    <el-checkbox label="2" >地推活动</el-checkbox>
                    <el-checkbox label="3" >线下主题活动</el-checkbox>
                    <el-checkbox label="44">单纯品牌曝光</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="特殊资源" prop="resource">
                <el-radio-group v-model="formData.resource">
                    <el-radio label="1">线上品牌商赞助</el-radio>
                    <el-radio label="2">线下场地免费</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="活动形式" prop="intro">
                <el-input type="textarea" v-model="formData.intro"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button>重置</el-button>
            </el-form-item> 
        </el-form>
    </div>
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script>
        let vm=new Vue({
            el: '#app',
            data() {
                return {
                   formData: {
                        name: "papa",
                        area: "",
                        date: '',
                        time: '',
                        // datetime:'',
                        switch: '',
                        type: [],
                        resource:'',
                        intro:''
                   },
                   rules: {
                        name: [
                            { required: true, message: '请输入活动名称', trigger: 'blur' },
                            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ],
                        area: [
                            { required: true, message: '请选择活动区域', trigger: 'change' }
                        ],
                        datetime: [
                            { type: 'datetime', required: true, message: '请选择日期', trigger: 'change' }
                        ],
                        type: [
                            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                        ],
                        resource: [
                            { required: true, message: '请选择活动资源', trigger: 'change' }
                        ],
                        intro: [
                            { required: true, message: '请填写活动形式', trigger: 'blur' }
                        ]
                    }
                }
            },
            methods: {
                submitForm(formName) {
                    // console.log(this.$data);
                    //console.log(this.formData);
                    //对表单进行校验 
                    // let _this=this;
                    // this.$refs[formName].validate(function (valid) {
                    //     console.log(vm.$data.formData);
                    //     if (valid) {
                    //         alert('submit!');
                    //     } else {
                    //         console.log('error submit!!');
                    //         return false;
                    //     }
                    // });

                      this.$refs[formName].validate((valid) => {
                        console.log(this.formData);
                        //箭头函数中作用域的this还是vm对象自己 而普通函数中 指的是方法调用者。但普通函数这里是windows对象这不用深究没意义
                    });
                    // this.$refs[formName].validate((valid) => {
                    //     if (valid) {
                    //         alert('submit!');
                    //     } else {
                    //         console.log('error submit!!');
                    //         return false;
                    //     }
                    // });
                },
            }
        })
    </script>
</body>

</html>

elementui固定宽度布局 elementui布局案例_elementui固定宽度布局_06

6.axios

axios day03