ElementUI快速入门

最新推荐文章于 2024-12-20 16:50:57 发布

原创最新推荐文章于 2024-12-20 16:50:57 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

青橙商城专栏收录该内容

30 篇文章

订阅专栏

这篇博客介绍了ElementUI的基础安装步骤，内容主要来源于官方文档。通过在HTML文件中引入CSS和JS，确保顺序正确，ElementUI可以与Vue2.0结合使用。文章提到，ElementUI中的axios.get()等方法可能涉及后端Controller，但在此处未详细展开。

都是从官网复制改改就完事：
https://element.eleme.cn/#/zh-CN/component/installation

先把css和js引入：
在这里插入图片描述
brand.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <link rel="stylesheet" href="../css/elementui.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>

<div id="app">
    <!--条件搜索的表单-->
    <el-form :inline="true">
        <el-form-item label="品牌名称">
            <el-input placeholder="品牌名称" v-model="searchMap.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌的首字母">
            <el-input placeholder="品牌的首字母" v-model="searchMap.letter"></el-input>
        </el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
        <el-button type="primary" @click="pojo={},formVisible=true">新增</el-button>
    </el-form>
    <!--这是element的表格-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="letter"
                label="首字母">
        </el-table-column>
        <el-table-column
                label="图片"
                width="180">
            <template slot-scope="scope">
                <img width="100px" height="50px" :src="scope.row.image">
            </template>
        </el-table-column>

        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row.id)" type="text" size="small">修改</el-button>
                <el-button @click="dele(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>



    </el-table>

    <!--分页功能，直接在element拷贝过来继续-->
    <el-pagination
            @size-change="fetchData"
            @current-change="fetchData"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--定义增加商品的弹出对话框-->
    <el-dialog title="新增编辑品牌" :visible.sync="formVisible">
        <!--弹出的对话框是一个表单-->
        <el-form label-width="80px">
            <el-form-item label="品牌名称">
                <el-input placeholder="品牌名称" v-model="pojo.name"></el-input>
            </el-form-item>
            <el-form-item label="品牌的首字母">
                <el-input placeholder="品牌的首字母" v-model="pojo.letter"></el-input>
            </el-form-item>
            <el-form-item label="品牌图片">
                <el-upload
                        class="avatar-uploader"
                        action="/upload/oss.do?folder=brand"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="排序">
                <el-input placeholder="排序" v-model="pojo.seq"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="save()">保存</el-button>
                <el-button  @click="formVisible=false">关闭</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>


<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/axios.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                tableData: [],
                currentPage:1,
                total:10,
                size:10,
                // 封装定义表单查询条件的实体
                searchMap:{},
                //定义新增商品的实体
                pojo:{},
                formVisible:false,
                //上传图片需要的
                imageUrl:''
            }
        },
        created(){
            this.fetchData();
        },
        methods:{
            fetchData(){
                axios.post(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(
                    response=>{
                        this.tableData=response.data.row;
                        this.total=response.data.total;
                    });
            },
            save(){
                this.pojo.image=this.imageUrl;
                //加this.pojo.id==null?'add':'update'是为了等下修改的时候也是调用save方法，所以要根据id来辨别那个是新增哪个是修改
                axios.post(`/brand/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response=>{
                    this.formVisible=false;
                    this.fetchData();
                })
            },
            edit(id){
                this.formVisible=true //共用新增的统一对话框窗口
                //调用查询
                axios.get(`/brand/findById.do?id=${id}`).then(response=>{
                    this.pojo=response.data;
                    this.imageUrl=this.pojo.image;  //显示图片
                })
            },
            dele(id){
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/brand/delete.do?id=${id}`).then(response=>{
                        this.$alert('删除成功','提示');
                        this.fetchData();//刷新列表
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            // 上传图片有关的
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        }

    })
</script>
</body>
</html>