Element 入门教程

举报
ruochen 发表于 2022/03/03 16:52:05 2022/03/03
【摘要】 Element 入门教程

Element 入门

  • 官网:https://element.eleme.cn/#/zh-CN
  • 引入 Element 的 css、js文件和 Vue.js
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    
  • 创建 Vue 核心对象
    <script>
                new Vue({
                    el: "#app"
                })
            </script>
    
  • 官网复制 Element 组件代码

Element 布局

  • Layout 布局:24 分栏
  • Container 布局容器:带导航栏

业务 - element 美化页面

表格

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 表格 -->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            align="center"
                            label="排序">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            align="center"
                            label="当前状态">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>

        </div>
        <script src="js/vue.js"></script>
        <script src="element-ui/lib/index.js"></script>
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <script>
            new Vue({
                el: "#app",
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        console.log(this.multipleSelection)
                    }
                },
                data() {
                    return {
                        multipleSelection: [],
                        tableData: [{
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }]
                    }
                }
            })
        </script>
    </body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--搜索表单-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!-- 表格 -->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            align="center"
                            label="排序">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            align="center"
                            label="当前状态">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>

        </div>
        <script src="js/vue.js"></script>
        <script src="element-ui/lib/index.js"></script>
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <script>
            new Vue({
                el: "#app",
                methods: {
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },

                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        console.log(this.multipleSelection)
                    },

                    // 查询方法
                    onSubmit() {
                        console.log(this.brand);
                    }
                },
                data() {
                    return {
                        // 搜索表单数据
                        brand: {
                            status: '',
                            brandName: '',
                            companyName: ''
                        },

                        // 复选框选中数据集合
                        multipleSelection: [],

                        // 表格数据
                        tableData: [{
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }]
                    }
                }
            })
        </script>
    </body>
</html>

对话框 + 表单

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--搜索表单-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            </el-row>

            <!--添加数据对话框表单-->
            <el-dialog
                    title="编辑品牌"
                    :visible.sync="dialogVisible"
                    width="30%">

                <el-form ref="form" :model="brand" label-width="80px">
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="brand.ordered"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="brand.description"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="brand.status"
                                   active-value="100"
                                   inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addBrand">提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <!-- 表格 -->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            align="center"
                            label="排序">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            align="center"
                            label="当前状态">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>

        </div>
        <script src="js/vue.js"></script>
        <script src="element-ui/lib/index.js"></script>
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <script>
            new Vue({
                el: "#app",
                methods: {
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },

                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        console.log(this.multipleSelection)
                    },

                    // 查询方法
                    onSubmit() {
                        console.log(this.brand);
                    },

                    // 添加数据
                    addBrand() {
                        console.log(this.brand);
                    }
                },
                data() {
                    return {
                        // 添加数据对话框是否展示的标记
                        dialogVisible: false,

                        // 品牌模型数据
                        brand: {
                            status: '',
                            brandName: '',
                            companyName: '',
                            id: '',
                            ordered: '',
                            description: ''
                        },

                        // 复选框选中数据集合
                        multipleSelection: [],

                        // 表格数据
                        tableData: [{
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }]
                    }
                }
            })
        </script>
    </body>
</html>

分页工具条

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--搜索表单-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            </el-row>

            <!--添加数据对话框表单-->
            <el-dialog
                    title="编辑品牌"
                    :visible.sync="dialogVisible"
                    width="30%">

                <el-form ref="form" :model="brand" label-width="80px">
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="brand.ordered"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="brand.description"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="brand.status"
                                   active-value="100"
                                   inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addBrand">提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <!-- 表格 -->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            align="center"
                            label="排序">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            align="center"
                            label="当前状态">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>

            <!--分页工具条-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
        <script src="js/vue.js"></script>
        <script src="element-ui/lib/index.js"></script>
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <script>
            new Vue({
                el: "#app",
                methods: {
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },

                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        console.log(this.multipleSelection)
                    },

                    // 查询方法
                    onSubmit() {
                        console.log(this.brand);
                    },

                    // 添加数据
                    addBrand() {
                        console.log(this.brand);
                    },

                    // 分页
                    handleSizeChange(val) {
                        console.log(`每页 ${val}`);
                    },
                    handleCurrentChange(val) {
                        console.log(`当前页: ${val}`);
                    }
                },
                data() {
                    return {
                        // 当前页码
                        currentPage: 4,

                        // 添加数据对话框是否展示的标记
                        dialogVisible: false,

                        // 品牌模型数据
                        brand: {
                            status: '',
                            brandName: '',
                            companyName: '',
                            id: '',
                            ordered: '',
                            description: ''
                        },

                        // 复选框选中数据集合
                        multipleSelection: [],

                        // 表格数据
                        tableData: [{
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }, {
                            brandName: '华为',
                            companyName: '华为科技有限公司',
                            ordered: '100',
                            status: '1',
                        }]
                    }
                }
            })
        </script>
    </body>
</html>

页面

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。