前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Element 入门教程

Element 入门教程

原创
作者头像
ruochen
发布2022-03-07 11:27:00
2.6K0
发布2022-03-07 11:27:00
举报
文章被收录于专栏:若尘的技术专栏

Element 入门

  • 官网:https://element.eleme.cn/#/zh-CN
  • 引入 Element 的 css、js文件和 Vue.js ```html <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 核心对象 ```js <script> new Vue({ el: "#app" }) </script> ```
  • 官网复制 Element 组件代码

Element 布局

  • Layout 布局:24 分栏
    <!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>
  • Container 布局容器:带导航栏
    业务 - element 美化页面
    表格

表单

代码语言: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>

对话框 + 表单

代码语言: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>

分页工具条

代码语言: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>

页面

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Element 入门
  • Element 布局
    • 表单
      • 对话框 + 表单
        • 分页工具条
          • 页面
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档