ElementUI

ElementUI

安装

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

安装

在项目文件夹下

1
npm install element-ui -S

引入组件

在main.js文件下

1
2
3
4
5
6
// 导入elementui组件
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 全局导入
Vue.use(Element)

测试

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <el-button>按钮</el-button>
  </div>
</template>

<script>
  const options = {
  }
  export default options
</script>

表格组件

表格组件

案例

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>
    <el-table :data="students">
      <!-- id、name等是students的属性 -->
      <el-table-column lable="编号" prop="id"></el-table-column>
      <el-table-column lable="姓名" prop="name"></el-table-column>
      <el-table-column lable="性别" prop="sex"></el-table-column>
      <el-table-column lable="年龄" prop="age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import axios from '../utils/myaxios'
  const options = {
    data() {
      return {
        students: []
      }
    },
    // 钩子函数, 数据挂载后, 视图的数据被Vue的替换
    async mounted() {
      // 发送请求，返回学生数据
      const resp = await axios.get('/api/students')
      this.students = resp.data.data
    }
  }
  export default options
</script>

分页条组件

分页条组件

案例

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
<template>
  <div>
    <el-table :data="students">
      <!-- id是students的属性 -->
      <el-table-column lable="编号" prop="id"></el-table-column>
      <el-table-column lable="姓名" prop="name"></el-table-column>
      <el-table-column lable="性别" prop="sex"></el-table-column>
      <el-table-column lable="年龄" prop="age"></el-table-column>
    </el-table>

    <!-- 总记录数，每页大小，当前页, 组件布局 -->
    <!-- 改变当前页时触发，改变页大小时触发 -->
    <el-pagination 
        :total="total"     
        :page-size="queryDto.size"
        :page-sizes="[5, 10]"
        :current-page="queryDto.page"
        layout="prev, pager, next, jumper, sizes, ->, total"
        @current-change="currentChange"
        @size-change="sizeChange"
    ></el-pagination>

  </div>
</template>

<script>
  import axios from '../utils/myaxios'
  const options = {
    data() {
      return {
        students: [],
        total: 0,
        // 查询条件
        queryDto: {
          page: 1,
          size: 10,
        }
      }
    },

    // 钩子函数, 数据挂载后, 视图的数据被Vue的替换
    mounted() {
      // 发送请求，返回学生数据
      this.query();
    },

    methods: {
      // 会返回页号
      currentChange(page) {
        this.queryDto.page = page
        this.query();
      },

      // 返回页面大小
      sizeChange(size) {
        this.queryDto.size = size
        this.query();
      },

      // 通过此方法发送请求
      async query() {
        const resp = await axios.get('/api/students/q', {
          params: this.queryDto
        })
        //console.log(resp)
        this.students = resp.data.data.list
        this.total = resp.data.data.total
      }
    }
  }
  export default options
</script>

搜索

案例

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
  <div>
    <!-- 搜索框 -->
    <el-input placeholder="请输入姓名" size="mini" v-model="queryDto.name"></el-input>
    <!-- 下拉框 -->
    <el-select placeholder="请选择性别" size="mini" v-model="queryDto.sex" clearable>
      <el-option value="男"></el-option>
      <el-option value="女"></el-option>
    </el-select>
    <el-select placeholder="请选择年龄" size="mini" v-model="queryDto.age" clearable>
      <el-option value="0,20" label="0-20"></el-option>
      <el-option value="21,30" label="21-30"></el-option>
      <el-option value="31,40" label="31-40"></el-option>
      <el-option value="41,120" label="41-120"></el-option>
    </el-select>

    <el-button type="primary" size="mini" @click="search">搜索</el-button>

    <el-table :data="students">
      <!-- id是students的属性 -->
      <el-table-column lable="编号" prop="id"></el-table-column>
      <el-table-column lable="姓名" prop="name"></el-table-column>
      <el-table-column lable="性别" prop="sex"></el-table-column>
      <el-table-column lable="年龄" prop="age"></el-table-column>
    </el-table>

    <!-- 总记录数，每页大小，当前页, 组件布局 -->
    <!-- 改变当前页时触发，改变页大小时触发 -->
    <el-pagination 
        :total="total"     
        :page-size="queryDto.size"
        :page-sizes="[5, 10]"
        :current-page="queryDto.page"
        layout="prev, pager, next, jumper, sizes, ->, total"
        @current-change="currentChange"
        @size-change="sizeChange"
    ></el-pagination>

  </div>
</template>

<script>
  import axios from '../utils/myaxios'
  const options = {
    data() {
      return {
        students: [],
        total: 0,
        // 查询条件
        queryDto: {
          page: 1,
          size: 5,
          name: '',
          sex: '',
          age: ''
        }
      }
    },

    // 钩子函数, 数据挂载后, 视图的数据被Vue的替换
    mounted() {
      // 发送请求，返回学生数据
      this.query();
    },

    methods: {
      // 会返回页号
      currentChange(page) {
        this.queryDto.page = page
        this.query();
      },

      // 返回页面大小
      sizeChange(size) {
        this.queryDto.size = size
        this.query();
      },

      search() {
        this.query()
      },

      // 通过此方法发送请求
      async query() {
        const resp = await axios.get('/api/students/q', {
          params: this.queryDto
        })
        //console.log(resp)
        this.students = resp.data.data.list
        this.total = resp.data.data.total
      }
    }
  }
  export default options
</script>

<style scoped>
  .el-input--mini,
  .el-search--mini {
    width: 193px;
    margin: 10px 10px 0 0;
  }
</style>

级联选择器

级联选择器

案例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
<template>
  <div>
    <el-cascader :options="ops"></el-cascader>
  </div>
</template>

<script>
  // import axios from '../utils/myaxios'
  const options = {
    data() {
      return {
        // 通过children来添加子选项,可嵌套多层
        ops: [
          {value: 100, label: '主页', children: [
            {value: 101, label: '菜单1', children:[
              {value: 102, label: '菜单11'},
              {value: 102, label: '菜单12'},
            ]},
            {value: 102, label: '菜单2'},
            {value: 103, label: '菜单3'},
          ]}
        ]
      }
    }
  }
  export default options
</script>

案例2

  • 将后端数据写到级联选择器
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
<template>
  <div>
    <el-cascader :options="ops" clearable></el-cascader>
  </div>
</template>

<script>
import axios from '../utils/myaxios'
  const options = {
    data() {
      return {
        ops: []
      }
    },

    // 组件加载完后将数据填入
    async mounted() {
      const resp = await axios.get('/api/menu')

      // 前端处理发来的数据
      const map = new Map()
      for (const {id, name, pid} of resp.data.data) {
        // 将数据存到map中
        map.set(id, {value: id, label: name, pid: pid})
      }
      const root = []
      for (const obj of map.values()) {
        const parent = map.get(obj.pid) // 获取父标签
        if (parent !== undefined) {
          parent.children ??= []
          parent.children.push(obj) // 添加到父标签里
        } else {
          root.push(obj)  //没有父标签，该标签为根标签
        }
      }
      this.ops = root
    }
  }
  export default options
</script>

布局容器

布局容器

案例

1
2
3
4
5
6
7
<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

导航菜单

案例

el-menu 里的router属性：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

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
<template>
    <div class="container">
        <el-container>

        <!-- 顶部 -->
        <el-header>
            
            <el-button icon="el-icon-search" circle size="mini" @click="jump('/c/p1')"></el-button>
            <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="jump('/c/p2')"></el-button>
            <el-button type="success" icon="el-icon-check" circle size="mini" @click="jump('/c/p3')"></el-button>

        </el-header>

        <el-container>

            <!-- 侧边栏 -->
            <el-aside width="200px">

                <!-- 导航栏 -->
                <el-menu
                    router
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    
                    <!-- 选项 -->
                    <el-menu-item index="/c/p1">
                        <!-- 用span将元素组合在一起，不然可能会错位 -->
                        <span slot="title">
                            <i class="el-icon-setting"></i>
                            菜单1
                        </span>
                    </el-menu-item>
                        <el-submenu>
                            
                            <span slot="title">
                                <i class="el-icon-star-off"></i>
                                菜单2
                            </span>
                        <el-menu-item>子项1</el-menu-item>
                        <el-menu-item>子项2</el-menu-item>
                        <el-menu-item>子项3</el-menu-item>
                    </el-submenu>
                    
                    <el-menu-item index="/c/p3">
                        <span slot="title">
                            <i class="el-icon-phone"></i>
                            菜单3
                        </span>
                    </el-menu-item>

                </el-menu>

            </el-aside>

            <!-- 主分区 -->
            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>
        </el-container>
    </div>
</template>

案例

动态添加菜单

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<template>
    <div class="container">
        <el-container>
            <el-header></el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- 动态菜单 -->
                    <el-menu router
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        unique-opened>
                        <template v-for="m1 of top">
                            <el-submenu v-if="m1.children" :key="m1.id" :index="m1.path">
                                <span slot="title">
                                    <i :class="m1.icon"></i>
                                    {{m1.name}}
                                </span>
                                <el-menu-item v-for="m2 of m1.children" :key="m2.id" :index="m2.path">
                                    <span slot="title">
                                        <i :class="m2.icon"></i>
                                        {{m2.name}}
                                    </span>
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :key="m1.id" :index="m1.path">
                                <span slot="title">
                                    <i :class="m1.icon"></i>
                                    {{m1.name}}
                                </span>
                            </el-menu-item>
                        </template>
                    </el-menu>

                </el-aside>
                <el-main></el-main>
            </el-container>
            </el-container>
    </div>
</template>





<script>
const options = {
    data() {
        return {    
            top: []
        }
    }, 

    mounted() {
        // 页面加载时，获取sessionStorage中的信息
        const serverRouters = sessionStorage.getItem('serverRoutes');
        const array = JSON.parse(serverRouters)

        // 解析数据
        const map = new Map()
        for (const obj of array) {
            map.set(obj.id, obj)
        }
        // 将子菜单放到父菜单下
        const top = []; // 根菜单
        for (const obj of array) {
            const parent = map.get(obj.pid)
            if (parent) {
                parent.children ??= []
                parent.children.push(obj)
            } else {
                top.push(obj);
            }
        }
        this.top = top
    }


}
export default options;
</script>






<style scoped>
.container {
    height: 500px;
    background-color: cornsilk;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='15' y='10' font-size='14' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E主页%3C/text%3E%3C/svg%3E");
    padding: 20px;
    box-sizing: border-box;
}

.el-container {
    height: 100%;
}

.el-header {
    background-color: aquamarine;
}

.el-aside {
    background-color: gold;
}

.el-main {
    background-color: dodgerblue;
}

a {
    text-decoration: none;
    display: block;
    margin: 10px 10px 0 10px;
    padding: 3px;
    font-size: 13px;
}

.router-link-active {
    color: #fff;
    background-color: darkslateblue;
}

.el-button {
    margin-top: 15px;
}
</style>

学习笔记 > 前端 > 组件库
#前端
ElementUI
http://xwww12.github.io/2022/10/06/前端/组件库/ElementUI/
作者
xw
发布于
2022年10月6日
许可协议