Element初级知识

最新推荐文章于 2024-05-22 18:10:32 发布

Faye_xue

最新推荐文章于 2024-05-22 18:10:32 发布

阅读量1.5k

点赞数

分类专栏： web网站笔记文章标签： javascript vue.js maven 前端开发语言

本文链接：https://blog.csdn.net/Faye_xue/article/details/127718487

版权

web网站笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

一、Element是什么？

Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

官网：https://element.eleme.cn/#/zh-CN

二、使用步骤

1.创建页面，并在页面引入Element 的css、js文件和 Vue.js

代码如下（示例）：

    引入vue.js
    <script src="js/vue.js"></script>
    <!--引入 element js css-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>

2.创建Vue核心对象

Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象

代码如下（示例）：

<script>
new Vue({
   el:"#app"
})
</script>

官网复制Element组件代码

官网：https://element.eleme.cn/#/zh-CN

3. Element 布局

Element 提供了两种布局方式

Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

Container 布局容器

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

三、案例分析

利用Element组件代码完成该页面的设计

事件说明：

size-change ：pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后，该事件会触发。

current-change ：currentPage 改变时会触发。也就是当我们点击了其他的页码后，该事件会触发。

完整页面代码

<!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-form-item>
   <el-form-item label="品牌名称">
       <el-input v-model="brand.brandName" placeholder="品牌名称">
   </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-i
   </el-form-item>
   <el-form-item label="状态">
       <el-switch v-model="brand.status"
                 active-value="1"
                 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"
       }]
     }
   }
})
</script>
</body>
</html>

总结

Element的好处以及便捷性

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

Faye_xue

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Element初级知识

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件一、与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
复制链接

扫一扫