Element UI学习

记录跟着青戈学毕设，一切来源于B站up主 @程序员青戈

一、下载与安装

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

npm安装

npm i element-ui -S

安装若是很慢就用镜像，我是直接就成功了。
如下图就安装成功

二、使用

1.引入 Element

在main.js中写入以下内容

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

Vue.use(ElementUI, { size: 'small' }); //small指的是小尺寸，官方提供了3种尺寸small，mini，默认，通常用small

插入位置如下

2.创建新页面

在router文件中新增路由指向新增页面

  {
    path: '/element',
    name: 'Element',
    component: () => import('../views/Element.vue')
  }

1.点击运行
2.得到url，点击链接
3.输入 /新增页面名称

三、组件

官网有丰富且完备的组件说明

• 布局：分为24栏，可以十分方便的设置布局 <el-row> 行 <el-col> 列
  row 行组件 提供 gutter属性来指定每一栏之间的间隔，默认间隔为 0。
  col 列组件 通过 span 属性来指定列占多少栏
  

• 按钮：<el-button> 提供有多个样式可以直接使用
  使用type、plain、round和circle属性来定义 Button 的样式。
  type 有 primary、success、info、warning、danger
  -

• 表单：（表单组件必须有v-model属性）
  el-input 搜索框、
  el-autocomplete 带搜索建议的搜索框（可以用作搜索联想）、
  el-select 下拉框 搭配el-option 使用，filterable 下拉框可搜索属性、
  el-radio单选框 搭配el-radio-group 使用、
  el-checkbox 复选框 搭配el-checkbox-group 使用
  el-date-picker 日期时间选择器

• 表格
  当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名，可以使用width属性来定义列宽，stripe属性可以创建带斑马纹的表格，border属性设置边框

代码如下：

<template>
    <div>
        <el-row style="margin: 20px">--------------------布局--------------------</el-row>
        <el-row :gutter="10">
            <el-col :span="12"><div style="width: 100%; height: 100px; background-color: aqua"></div></el-col>
            <el-col :span="6"><div style="width: 100%; height: 100px; background-color: red"></div></el-col>
            <el-col :span="3"><div style="width: 100%; height: 100px; background-color: pink"></div></el-col>
            <el-col :span="3"><div style="width: 100%; height: 100px; background-color: green"></div></el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <div style="border: 1px solid #ccc;padding: 10px;text-align: center">
                    <img style="width: 50%" src="@/assets/logo.png">
                    <div>这是Vue的logo</div>
                    <div style="color: red">价格 ￥99.99</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="border: 1px solid #ccc;padding: 10px;text-align: center">
                    <img style="width: 50%" src="@/assets/logo.png">
                    <div>这是Vue的logo</div>
                    <div style="color: red">价格 ￥99.99</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="border: 1px solid #ccc;padding: 10px;text-align: center">
                    <img style="width: 50%" src="@/assets/logo.png">
                    <div>这是Vue的logo</div>
                    <div style="color: red">价格 ￥99.99</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="border: 1px solid #ccc;padding: 10px;text-align: center">
                    <img style="width: 50%" src="@/assets/logo.png">
                    <div>这是Vue的logo</div>
                    <div style="color: red">价格 ￥99.99</div>
                </div>
            </el-col>
        </el-row>

        <el-row style="margin: 20px">--------------------按钮--------------------</el-row>
        <el-row>
            <el-col :span="24">
                <button>按钮</button>
            </el-col>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>

            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>


            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>

            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
        </el-row>

        <el-row style="margin: 20px">--------------------表单--------------------</el-row>
<!--        表单组件必须有v-model属性-->
        <!--input-->
        <el-row>
            <el-col>
                <el-input style="width: 200px" v-model="value" placeholder="请输入内容"></el-input>  <!--输入框强制要求必须有v-model属性-->
                <el-input type="textarea" style="width: 200px" v-model="value1" placeholder="多行文本"></el-input>
                <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码"></el-input>
                <el-input style="width: 200px" v-model="value2" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                <el-input clearable style="width: 200px" v-model="value3" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
            </el-col>
        </el-row>

        <!--带搜索建议的输入框-->
        <el-row >
            <el-col>
                <el-autocomplete style="width: 300px" placeholder="我是带建议的搜索框" :fetch-suggestions="querySearch"
                                 :trigger-on-focus="false" v-model="value4"></el-autocomplete>
            </el-col>
        </el-row>

        <!--下拉框-->
        <el-row >
            <el-select v-model="select" @change="changeSelect" multiple>    <!--下拉框value值改变时触发changeSelect函数-->
                                                                            <!--multiple多选 会将select变为数组-->
                <el-option value="香蕉"></el-option>
                <el-option value="苹果"></el-option>
                <el-option value="梨"></el-option>
            </el-select>

            <el-select v-model="fruit" @change="changeFruits"> <!--下拉框value值改变时触发changeSelect函数-->
                <el-option v-for="item in fruits" :key="item.id" :label="item.name" :value="item.name"></el-option>  <!--v-for通常搭配:key绑定唯一标识-->
            </el-select>

            <el-select v-model="user" @change="changeUser"> <!--界面显示label后台传入value-->
                <el-option v-for="item in users" :key="item.card" :label="item.name" :value="item.card"></el-option>  <!--v-for通常搭配:key绑定唯一标识-->
            </el-select>

            <!-- filterable 下拉框可搜索属性-->
            <el-select v-model="option" filterable placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

        </el-row>

        <!--单选框-->
        <el-row>
            <el-radio-group v-model="radio" @change="selectRadio">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>
        </el-row>

        <!--多选框-->
        <el-row>
            <el-checkbox-group v-model="checkList" @change="selectCheckBox">
                <el-checkbox  label="复选框 A"></el-checkbox >
                <el-checkbox  label="复选框 B"></el-checkbox >
            </el-checkbox-group>
        </el-row>

        <!--日期时间选择器-->
        <el-row>
                                                                             <!--value-format初始化格式 年月日 时分秒-->
            <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
            <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDatetime"></el-date-picker>
            <el-date-picker v-model="daterange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDateRange"></el-date-picker>
        </el-row>

        <!--表格-->
        <el-row style="margin: 20px 0">
            <el-table :data="tableData" border :header-cell-style="{backgroundColor:'aliceblue',fontSize:'16px'}">
                <el-table-column label="序号" prop="id"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="年龄" prop="age"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
    export default{
        name:'Element',
        data(){
            return{
                value:'',
                value1:'',
                value2:'',
                value3:'',
                value4:'',
                password:'',
                coffees: [{ value: '1星巴克咖啡' },{ value: '1栖巢咖啡' }, {value: '2瑞幸咖啡'}, {value: '3库迪咖啡'}],  //autocomplete中value是必填值
                select:'',
                fruit:'',
                fruits:[{ name: '香蕉', id:1 },{ name: '苹果', id:2 }, {name: '梨', id:3}, {name: 'Vue', id:4}],
                user:'',
                users:[{name:'张三',card :10010 },{name:'李四', card:10086},{name:'王五',card:10011}],
                option:'',
                options: [  {value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'},
                            {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'},
                            {value: '选项5', label: '北京烤鸭'}
                        ],
                radio:'',
                checkList:[],
                date:'',
                datetime:'',
                daterange:'',
                tableData:[
                    { name:'张三',address:'北京天安门',id:1,age:'31'},
                    { name:'李四',address:'珠海',id:2,age:'22'},
                    { name:'王五',address:'黄山',id:3,age:'23'}
                ]
            }
        },
        methods:{
            querySearch(query, cb) {  // callback
                let result =  query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
                console.log(result)
                cb(result);
            },
            changeSelect(){
                console.log(this.select)
            },
            changeFruits(){
                console.log(this.fruit)
            },
            changeUser(){
                console.log(this.user)
            },
            selectRadio(){
                alert(this.radio)
            },
            selectCheckBox(){
                console.log(this.checkList)
            },
            changeDate(){
                console.log(this.date)
            },
            changeDatetime(){
                console.log(this.datetime)
            },
            changeDateRange(){
                console.log(this.daterange)
            },
            edit(row){
                // alert(row.name)
                // this.$message.success(row.name)     //上弹窗
                // this.$message.warning(row.name)
                // this.$notify.success(row.name)   //右弹窗
                // this.$message.warning(row.name)

                this.$confirm('这是一个弹窗', '提示', {
                    type:'warning'
                }).then(res =>{
                    this.$message.success("我点了确认")
                }).catch(()=>{
                    this.$message.warning("我点了取消")
                })
            }
        }
    }

</script>