Element-UI基础之知识总结

Element-UI基础之知识总结

---

---

前言

---

一、Element-UI概述 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官网 https://element-plus.gitee.io/#/zh-CN

二、Element-UI 的基本使用

2.1 基于命令行方式手动安装

2.1.1 安装依赖包 npm i element-ui –S

2.1.2 全部导入Element-UI相关资源

在入口js文件内配置下列语句

	 // 导入组件库
	 import ElementUI from 'element-ui';
	 
	 // 导入组件相关样式
	 import 'element-ui/lib/theme-chalk/index.css';
	 
	 // 配置 Vue 插件
	 Vue.use(ElementUI);

从官网处复制代码到项目的vue文件的模板中

2.2 基于图形化界面自动安装

2.2.1 运行 vue ui 命令，打开图形化界面

2.2.2 通过 Vue 项目管理器，进入具体的项目配置面板

2.2.3 点击 插件 -> 添加插件，进入插件查询面板

2.2.4 搜索 vue-cli-plugin-element 并安装

2.2.5 修改配置,导入方式为 import on demand

2.2.6 在element.js中配置插件，在官网中搜索样式模块名称，实现按需导入

2.2.7 从官网处复制代码到项目的vue文件的模板中

三、Element-UI 常用组件

3.1 表单 el-form

3.1.1 绑定数据对象(命名:功能+Form) :model = "表单数据对象"

3.1.2 绑定表单校验规则对象(命名:功能+FormRules) :rules=“表单校验规则”

绑定校验规则对象的子项名(通常与数据同名) prop=“校验规则对象的子项名”

自定义校验规则

    var checkEmail = (rule, value, callback) => {
        var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
        if(!reg.test(value)) {
            callback(new Error('请输入合法的邮箱地址'));
        }
        callback();
    };
    var checkMobile = (rule, value, callback) => {
        let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
        if(!reg.test(value)) {
            callback(new Error('请输入合法的手机号码'));
        }
        callback();
    };

   editFormRules: {
       email: [
           { required: true, message: '请输入邮箱', trigger: 'blur' },
           { validator: checkEmail, trigger: 'blur'}
       ],
       mobile: [
           { required: true, message: '请输入手机号码', trigger: 'blur' },
           { validator: checkMobile, trigger: 'blur'}
       ]
   },

3.1.3 绑定表单实例对象(命名:功能+FormRef) ref="表单实例对象"

3.2 菜单 el-menu

3.2.1 修改颜色属性（仅支持 hex 格式） background-color、text-color、active-text-color

3.2.2 是否只保持一个子菜单的展开 :unique-opened="true/false"

3.2.3 启用使激活导航时以 index 作为 path 进行路由跳转的模式 :router="true" ,使当前激活菜单的index为点击的菜单项的index值 :default-active="activePath"

// 当点击菜单时需要保存路径并重新赋值给activePath
setActivePath(activePath) {
    window.sessionStorage.setItem('activePath',activePath);
    this.getActivePath();
},
getActivePath() {
    this.activePath = window.sessionStorage.getItem('activePath');
}

3.2.4 折叠关闭菜单 :collapse="isCollapse" :collapse-transition="true"

 // 当点击某个按钮时修改isCollapse是true或false
 toggleCollapse: function () {
     this.isCollapse = !this.isCollapse;
 },

3.2.1 一级菜单 el-submenu

3.2.2 二级菜单 el-menu-item

将路径作为index的值使得当前激活的菜单项和页面显示匹配

<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :unique-opened="true" 
:collapse="isCollapse" :collapse-transition="true" :router="true" :default-active="activePath" class="el-menu-vertical-demo">
    <!-- 一级菜单 -->
    <el-submenu :index="item.id + '' " v-for="item in menuList" :key="item.id">
        <!-- 一级菜单模板 -->
        <template #title>
            <!-- 一级菜单的icon -->
            <i :class="iconObj[item.id]" ></i>
            <!-- 一级菜单的标题 -->
            <span>{{item.authName}}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item :index="'/' + subItem.path " v-for="subItem in item.children" :key="subItem.id" v-on:click="setActivePath('/' + subItem.path)">
            <template #title>
                <!-- 二级菜单的icon -->
                <i class="el-icon-menu"></i>
                <!-- 二级菜单的标题 -->
                <span>{{subItem.authName}}</span>
            </template>
        </el-menu-item>
    </el-submenu>
</el-menu>

3.3 表格 el-table

属性	备注
data	数据数组
border	使表格每一项有边框
type=“index”	表示该行是表格头
type=“expand”	表示该行是可展开的按钮
stripe	隔行变色，斑马效果
prop	数据数组里每个对象里的每个属性

 <el-table :data="usersList" style="width: 100%" border :stripe="true">
    <!-- 表格头 -->
    <el-table-column
    type="index"
    label="#">
    </el-table-column>

    <el-table-column
        prop="username"
        label="姓名"
        width="180">
    </el-table-column>

    <el-table-column
        prop="email"
        label="邮箱">
    </el-table-column>

    <el-table-column
        prop="mobile"
        label="电话"
        width="180">
    </el-table-column>

    <el-table-column
        prop="role_name"
        label="角色">
    </el-table-column>

    <el-table-column
        prop="mg_state"
        label="状态">
        <template slot-scope="scope">
            <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ccc" @change="usersStateChange(scope.row)">
            </el-switch>    
        </template>                   
    </el-table-column>
    
    <el-table-column
        label="操作" width="180px">
        <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editUsers(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
            <el-tooltip class="item" effect="dark" content="设置角色" :enterable="false" placement="top-start">
                <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
            </el-tooltip> 
        </template>
    </el-table-column>
</el-table>

3.4 分页 el-pagination

<!-- 在页面中改变current-page、page-sizes的值，选择的值会传给handle函数作为参数 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="usersInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="usersInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>

methods: {
    handleSizeChange(pagesize) {
    	// 修改获取数据api的参数
        this.usersInfo.pagesize = pagesize;
        // 需要刷新获取回来的数据
        this.getUsersList();
    },
    handleCurrentChange(currentpage) {
        this.usersInfo.pagenum = currentpage;
        this.getUsersList();
    }
}

3.5 对话框 el-dialog

<!-- 添加用户对话框区域 -->
<el-dialog
    title="添加用户"
    v-bind:visible="addUsersVisible"
    width="30%"
    @close="clearAddForm">
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
        <el-button @click="addUsersVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
    </template>
</el-dialog>  

3.6 树形控件 el-tree

<el-tree :data="rightList" :props="treeProps" show-checkbox node-key="id" :default-expand-all="true" 
:default-checked-keys="defKeys" ref="roleRef">

</el-tree>

		// 获取树形结构的所有数据
        async showSetRightDialog(role) {
            this.roleID = role.id;
            const {data: res} = await this.$http.get('rights/tree');
            if(res.meta.status != 200) return this.$message.error('获取权限失败');
            this.rightList = res.data;
            this.$message.success('获取成功');
            this.getRightIdArray(role,this.defKeys);
            this.setRightVisible = true;
        },
		
		// 获取默认选中的节点并把其添加到数组中
        getRightIdArray(node,arr) {
        // 如果当前 node 节点不包含 children 属性，则是三级节点
        if (!node.children) {
            return arr.push(node.id)
        }

        for(var item in node.children) {
            this.getRightIdArray(node.children[item],arr);
        }

        // node.children.forEach(item => this.getRightIdArray(item, arr));
        },

		// 当对话框关闭的时候要清空数组
        setRIghtDialogClosed() {
            this.defKeys = [];
        },

3.7 下拉菜单 el-select

  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

3.8 级联选择器 el-select

  <el-cascader
  v-model="selectedKeys"
  :options="parentCateList"
  :props="CasCaderProps"
  @change="handleChange" clearable change-on-select >
      
  </el-cascader>

 // 级联选择器的配置
 CasCaderProps: {
     expandTrigger: 'hover',
     value: 'cat_id',
     label: 'cat_name',
     children: 'children'
 },

 // 存储已选择分类的id数组
 selectedKeys: []

3.9 进度条 el-steps

 <!-- 进度条区域 -->
 <el-steps finish-status="success" process-status="process" 
 align-center :active="parseInt(activeIndex)">
     <el-step title="基本信息"></el-step>
     <el-step title="商品参数"></el-step>
     <el-step title="商品属性"></el-step>
     <el-step title="商品图片"></el-step>
     <el-step title="商品内容"></el-step>
     <el-step title="完成"></el-step>
 </el-steps>

3.10 tab栏 el-tab

<!-- tabs栏,绑定的值是当前选项的name值 -->
<el-tabs tab-position="left" v-model ="activeIndex" 
:before-leave="beforeLeave" :tab-click="tabClicked">
    <el-tab-pane label="基本信息" name="0"></el-tab-pane>
    <el-tab-pane label="商品参数" name="1"></el-tab-pane>
    <el-tab-pane label="商品属性" name="2"></el-tab-pane>
    <el-tab-pane label="商品图片" name="3"></el-tab-pane>
    <el-tab-pane label="商品内容" name="4"></el-tab-pane>
</el-tabs>

// 对tab栏的切换进行判断
beforeLeave(activeName, oldActiveName) {
   if(oldActiveName == '0' && this.addForm.goods_cat.length != 3) {
       this.$message.error('请先选择商品分类')
       return false;
   }
},

3.11 上传 el-upload

<el-upload
:action="actionURL"
:on-preview="handlePreview"
:on-remove="handleRemove"
list-type="picture"
:headers="headerObj" 
:on-success="handleSuccess">
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

 /*-----------------------商品图片-----------------------*/
 // 预览上传项
 handlePreview(file) {
     this.imgURL = file.response.data.url;
     this.imgDialogVisible = true
 },

 // 移除上传项
 handleRemove(file) {
     const filePath = file.response.data.tmp_path;
     const index = this.addForm.pics.findIndex(item => item.pic == filePath);
     this.addForm.pics.splice(index, 1);
 },

 // 监听图片上传成功
 handleSuccess(response) {
     const picsInfo = {
         pic: response.data.tmp_path
     };
     this.addForm.pics.push(picsInfo);
 },

总结