Element-UI

安装 

1
2
3
 
# 在 vue 项目中启动终端执行
vue add element
# 安装过程中可以选择按需加载

  • 按需加载

    按需加载
    按需加载

基础使用

  • 引入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    		 
    <!-- Button.vue -->
    <template>
      <div>
        <el-row>
          <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-row>
        <router-view />
      </div>
    </template>

    • 渲染

      Button 使用
      Button使用

    • 属性介绍: 使用type、plain、round 和circle 属性来定义 Button 的样式。

    • 灵活使用属性即可获得想要的结果

Layout 布局

  • 通过基础的 24 分栏，迅速简便地创建布局。

  • offset 属性使用

    offset
    offset

RadioButton

  • 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    		 
    <template>
        <div class="radio-button">
            <template>
                <el-radio v-model="label" label="男">男</el-radio>
                <el-radio v-model="label" label="女">女</el-radio>
            </template>
            <router-view />
        </div>
    </template>

    <script>

    export default ({
       data(){
           return{
               label:'男'
           }
       }
    })
    </script>

    <style scoped>
    .radio-button{
        margin: 50px;
    }
    </style>

  • 渲染

    radio-button 使用需要与v-model 共同配合
    radio-button

Input

input
input
  • 在使用组件的方法时需要在对应的组件中加入ref="组件别名"
  • 在调用方法时直接使用this.$refs.组件别名.方法名()
  • 在element-ui 中所有组件标签上,使用方式属性名=属性值方式
    • 属性: 直接写在对应的组件标签上,使用方式属性名=属性值方式
    • 事件: 直接使用vue 绑定事件方式写在对应的组件标签上,使用方式@事件名=vue中事件的处理函数

Select

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<template>
    <div class="select">
        <template>
            <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>
        </template>
        <router-view></router-view>
    </div>

</template>

<script>
export default {
    name: "Select",
    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: ''
        }
    }
}
</script>

<style scoped>
.select {
    margin: 50px;
}
</style>

Switch开关组件

  • 使用

    • 后台传值为boolean

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      		 
      <template>
          <div class="div">
              <el-switch
                  v-model="value"
                  <!-- name 数据库操作 -->
                  name="switch" 
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
              <router-view></router-view>
          </div>
      </template>

      <script>
      export default {
          data() {
              return {
                  value: true
              }
          }
      };
      </script>

    • 后台传值为number

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      		 
      <template slot-scope='scope'>
          <el-tooltip class='item'
                      effect='dark'
                      :content='scope.row.status=="1"?"正常":"禁用"'
                      placement='top-start'
                      :enterable='false'>
              <el-switch
                         v-model='scope.row.status'
                         inactive-color='#ff4949'
                         :active-value='1'
                         :inactive-value='0'>
              </el-switch>
          </el-tooltip>
      </template>

      • 渲染效果

        switch
        switch

DatePicker组件使用 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<template>
    <div class="date-picker">
        <div class="block">
            <span class="demonstration">多个日期</span>
            <el-date-picker
                type="dates"
                v-model="value4"
                placeholder="选择一个或多个日期">
            </el-date-picker>
            <hr>
            <div class="block">
                <span class="demonstration">带快捷选项</span>
                <el-date-picker
                    v-model="value2"
                    type="monthrange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </div>
            
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "DatePickerVue",
    data() {
        return {


            pickerOptions: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                    }
                }, {
                    text: '今年至今',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().getFullYear(), 0);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 6);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: '',
            value2: '',
            value3: '',
            value4: ''
        };
    }
}
</script>

<style scoped>
.block {
    margin: 50px;
}
</style>

  • 渲染

    渲染
    渲染

Select

  • 基础使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    		 
    <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>


    <script>
      export default {
        data() {
          return {
            options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
            value: ''
          }
        }
      }
    </script>

  • 数值使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    		 
    options: [{
                    value: '1',
                    label: '1'
                }, {
                    value: '2',
                    label: '2'
                }, {
                    value: '3',
                    label: '3'
                }, {
                    value: '4',
                    label: '4'
                }, {
                    value: '5',
                    label: '5'
                }]

    也可以使用修饰符 v-model.number="xxx"

    • 渲染

      数值使用
      数值使用

Message

  • 使用一

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    		 
    <template>
        <div class="message-view">
            <el-button :plain="true" @click="getMessage" type="success">打开消息提示</el-button>
            <router-view></router-view>
        </div>
    </template>

    <script>
    export default {
        name: "MessageView",
        methods: {
            getMessage() {
                this.$message({
                    showClose: true,
                    message: '恭喜你，这是一条成功消息',
                    type: 'success',
                    offset: 50,
                    duration: 1000
                });
            }
        }
    }
    </script>

    <style scoped>
    .message-view {
        margin: 50px;
    }
    </style>

    • 渲染

      渲染
      渲染

  • 使用二

    1
    2
    3
    4
    		 
    //  Message 需要全局挂载 plugin/element.js
    Vue.prototype.$message = Message

    this.$message.success('成功获取点击后的提示信息!');

MessageBox

  • 全局挂载

    1
    2
    3
    		 
    // 不需要经过 Vue.use()
    Vue.prototype.$confirm = MessageBox.confirm
    Vue.prototype.$message = Message

  • 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    		 
    handleDelete(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

  • 渲染

    MessageBox
    MessageBox

Select

  • 效果

    下拉框数据绑定
    下拉框数据绑定

  • 实现分析

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    		 
    <el-select v-model='dishCategoryList' placeholder='请选择菜品分类'>
        <el-option
                   v-for='item in formFoodInput.category'
                   :key='item.id'
                   :label='item.name'
                   :value='item.name'
                   >
        </el-option>
    </el-select>

    dishCategoryList: '' <!-- 选择后的数据绑定 --> 
    formFoodInput.category: [] <!-- 获取数据绑定 --> 



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    		 
    /**
         * 获取下拉分类请求
         *
         * @param category
         * @return
         */
    @GetMapping("/list")
    public R<List<Category>> list(Category category) {
        log.info("根据条件查询分类: {}", category.toString());
        /* 条件构造器 */
        LambdaQueryWrapper<Category> queryWrapper = new LambdaQueryWrapper<>();
        /* 添加条件 */
        queryWrapper.eq(category.getType() != null, Category::getType, category.getType());
        /* 添加排序条件 */
        queryWrapper.orderByAsc(Category::getSort).orderByDesc(Category::getUpdateTime);
        List<Category> list = categoryService.list(queryWrapper);
        return R.success(list);
    }

Table

  • 过滤器的使用

    基础使用
    基础使用

  • 自定义过滤器

    1
    2
    3
    4
    5
    6
    7
    		 
    // 时间长忘记vue是有过滤器配置项 以下为 vue 配置项中的过滤器
    filters: {
            // 过滤价格显示
            filterPrice(price) {
                return '￥' + parseFloat(price).toFixed(2)
            }
        }

    • 需求

      1
      		 
      // 实现数据库查询,对价格显示进行格式化操作
      渲染
      渲染

    • 数据库数据

      数据库原始数据格式
      数据库原始数据格式

    • 表格使用布局

      布局结构
      布局结构

综合表单初始值确定 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<template>
    <div class="vmodel">
        <hr>
        <div class="userform">
            用户名:
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <br>
            密码:
            <el-input v-model="password" placeholder="请输入密码"></el-input>
            <br>
            性别:
            <el-radio v-model="sex" label="male">男</el-radio>
            <el-radio v-model="sex" label="female">女</el-radio>
          爱好:
            <el-checkbox-group v-model="hobby">

                <el-checkbox label="Java"></el-checkbox>
                <el-checkbox label="Python"></el-checkbox>
                <el-checkbox label="Vue"></el-checkbox>
                <el-checkbox label="C#"></el-checkbox>
                <el-checkbox label="C++"></el-checkbox>
            </el-checkbox-group>
            <br>
            所属校区:
            <el-select v-model="belogSchoolValue" placeholder="请选择">
                <el-option
                    v-for="item in belogSchool"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <br>
            其他信息:
            <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>

            <el-checkbox v-model="checked">备选项</el-checkbox>阅读并接受  <el-link type="warning">&lt;&lt;用户协议&gt;&gt;</el-link>
        </div>
    </div>
</template>

<script>
export default {
    name: "VmodelButton",
    data() {
        return {
            input: '',
            password: '',
            sex: '',
            // 适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
            hobby: [],
            belogSchool: [
                {
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }
            ],
            belogSchoolValue: '',
            textarea: ''
        }
    }
}
</script>
初始值类型
初始值

GiteePages部署测试

  • 路由模式不能是history

  • 配置vue.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    		 
    const {defineConfig} = require('@vue/cli-service')
    module.exports = defineConfig({
        transpileDependencies: true,
        publicPath: process.env.NODE_ENV === 'production'
            ? '/element-ui/'
            : '/'
    })

    # 修改为需要部署到的仓库 Eg: element-ui,部署时选择对应打包的静态文件分支部署即可
    # 部署后的地址会添加上仓库地址 https://coder-itl.gitee.io/element-ui/#/index
    # 如果不进行配置,是无法进行访问的
    仓库信息
    仓库信息

  • gitee

    Element-UI部署查看

    https://coder-itl.gitee.io/element-ui

    部署测试
    部署测试