代码收藏家技术教程 2024-10-25

Element组件使用

介绍

新手程序员一枚，渴望成为大神，来点关注来点赞，给我介绍几个大神也行，球球了。

主要记录自己的学习过程，将之前的笔记进行整理并分享一下，有错误请指出，谢谢各位大佬爷们的观看。

下面开始分享我的笔记

官网

https://element.eleme.cn/2.11/#/zh-CN

组件库安装

需要在工程目录下执行指令

npm install element-ui@2.15.3

引入组件库（入口文件main.js）

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//使用element-ui组件
Vue.use(ElementUI);

访问官网

定义一个vue组件

命名使用驼峰命名

一般在view文件夹下新建

模板

<template>
    <div>
        
    </div>
</template>

<script>
    export default {
        
        
    }
</script>

<style>

</style>

官网复制组件并调整

在根组件中引用上文编写的网页

在模板部分
<div>
    <Element-view></Element-view> 
</div>

js部分
<script>

import ElementView from './views/element/ElementView.vue'

export default { 
  components:{ElementView}
  
}
</script>

效果

常见组件

表格

<!-- 表格 -->
        <el-table :data="tableData" height="250" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>

data() {
        return {
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }]
        }
        }

效果

分页

<el-pagination background layout="sizes,prev, pager, next, jumper, total" 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        :total="1000">
        </el-pagination>
  //事件
 // @size-change="handleSizeChange"
 //@current-change="handleCurrentChange"

//事件
//位于methods中
handleSizeChange : function(val){
                alert("每页记录数变化"+val)
            },
handleCurrentChange : function(val){
    alert("页码变化"+val)
}

效果

对话框

<!-- 对话框 -->
        <!-- 按钮 -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
        <!-- 表格 -->
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>

gridData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                dialogTableVisible: false,

效果

表单

<!-- 对话框-表单 -->
        <!-- 按钮 -->
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
        <!-- 表单 -->
        <el-dialog title="表单" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

//数据模型
form: {
    name: '',
    region: '',
    date1: '',
    date2: ''
},
dialogFormVisible: false

效果

tips

将js对象转换为JSON字符串的函数

JSON.stringify(具体对象)

案例

描述

编写员工管页面

通过Axios完成异步数据加载

实现

步骤

创建页面

完成整体布局

各种组件的实现

异步数据加载

目录设计

//目录
views/tlias/EmpView.vue

布局

<template>
    <div>
        <!-- 布局 -->
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">system</el-header>
            <el-container>
                <!-- 左侧区域 -->
                <el-aside width="170px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">部门管理</el-menu-item>
                                <el-menu-item index="1-2">员工管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 主区域 -->
                <el-main>
                    <!-- 表单 -->
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="searchForm.gender" placeholder="性别">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="入职日期">
                            <!-- 日期 -->
                            <el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>

                    <!-- 表格 -->
                    <el-table :data="tableData" border="">
                        <el-table-column prop="name" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column prop="image" label="图像" width="180">
                            <!-- 插槽 -->
                            <template slot-scope="scope">
                                <img :src="scope.row.image" alt="图片" width="170px" height="50">
                            </template>
                        </el-table-column>
                        <el-table-column label="性别" width="140">
                            <!-- 插槽 -->
                            <template slot-scope="scope">
                                {{scope.row.gender == 1 ? '男' : '女'}}
                            </template>

                        </el-table-column>
                        <el-table-column prop="job" label="职位" width="140">
                        </el-table-column>
                        <el-table-column prop="entrydate" label="入职日期" width="180">
                        </el-table-column>
                        <el-table-column prop="updatetime" label="操作时间" width="230">
                        </el-table-column>
                        <el-table-column label="操作" width="150">
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>
                    <br>
                    <!-- 分页条 -->
                    <el-pagination background layout="sizes,prev, pager, next,jumper" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :total="1000">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

js

<script>
// 导入axios
import axios from 'axios';

export default {
    data() {
        return {
            searchForm: {
                name: '',
                gender: '',
                entrydate: []
            },
            tableData: []
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
            console.log(JSON.stringify(this.searchForm));
        },
        handleSizeChange: function (val) {
            alert("每页记录数变化" + val)
        },
        handleCurrentChange: function (val) {
            alert("页码变化" + val)
        },
    },
    mounted() {
        // 发送异步请求
        axios.get("http://yapi.cblink.net/mock/1100/infobyid").then(result => {
            // console.log(JSON.stringify(result.data.data));
            this.tableData = result.data.data
        });
    },
}
</script>

Axios

安装

//当前目录下
npm install axios

导入

// 在js导入axios
import axios from 'axios';

通过YAPI模拟接口数据

//此处发送请求
mounted() {
        // 发送异步请求
        axios.get("http://yapi.cblink.net/mock/1100/infobyid").then(result => {
            // console.log(JSON.stringify(result.data.data));
            this.tableData = result.data.data
        });
    },

other

<!-- 插槽 -->
<!-- 动态绑定 -->
<template slot-scope="scope">
    <img :src="scope.row.image" alt="图片" width="170px" height="50">
</template>

<!-- 插槽 -->
<template slot-scope="scope">
    {{scope.row.gender == 1 ? '男' : '女'}}
</template>

效果

YAPI模拟操作可以参考这篇文章中的步骤

前端工程化-CSDN博客

以上是学习的第三弹笔记。后面会慢慢更新笔记。

项目位置！！！！！

https://gitee.com/zsjnew/admin_web_project.git

作者：jie~TestPeo

物联沃分享整理
物联沃-IOTWORD物联网 » Element组件使用

代码收藏家普通

分享到：

介绍

官网

组件库安装

访问官网

常见组件

表格

效果

分页

效果

对话框

效果

表单

效果

tips

案例

描述

实现

步骤

目录设计

布局

js

Axios

效果

代码收藏家 普通

相关推荐

发表回复 取消回复

代码收藏家普通

发表回复取消回复