vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）_el-select 分页

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<template>
  <el-select
 popper-class="t\_pagination\_select"
 v-model="childSelectedValue"
 :style="{width: width||'100%'}"
 v-bind="attrs"
 v-on="$listeners"
 >
    <el-option
 v-for="item in optionSource"
 :key="item[valueKey]"
 :label="item[labelKey]"
 :value="item[valueKey]"
 ></el-option>
    <el-pagination
 :layout="paginationOption.layout || 'total,prev, pager, next'"
 :page-size="paginationOption.pageSize"
 :current-page="paginationOption.currentPage"
 :pager-count="paginationOption.pagerCount"
 :total="paginationOption.total"
 v-bind="{
 small: true,
 'hide-on-single-page':true,
 background: true,
 ...$attrs,
 ...paginationOption.bind,
 }"
 v-on="$listeners"
 />
  </el-select>
</template>

<script>

export default {
 name: 'TPaginationSelect',
 props: {
 value: {
 type: [String, Number, Array]
 },
 // 选择框宽度
 width: {
 type: String
 },
 // 传入的option数组中，要作为最终选择项的键值名称
 valueKey: {
 type: String,
 default: 'key'
 },
 // 传入的option数组中，要作为显示项的键值名称
 labelKey: {
 type: String,
 default: 'label'
 },
 // 下拉框组件数据源
 optionSource: {
 type: Array
 },
 // 分页配置项
 paginationOption: {
 type: Object,
 default: () => {
 return {
 pageSize: 6, // 每页显示条数
 currentPage: 1, // 当前页
 pagerCount: 5, // 按钮数，超过时会折叠
 total: 0 // 总条数
 }
 }
 }
 },
 computed: {
 childSelectedValue: {
 get() {
 return this.value
 },
 set(val) {
 this.$emit('input', val)
 }
 },
 attrs() {
 return {
 clearable: true,
 filterable: true,
 ...this.$attrs
 }
 }
 }
}
</script>
 <style lang="scss">
.t\_pagination\_select {
 .el-pagination {
 display: flex;
 background-color: #fff;
 align-items: center;
 .el-pagination\_\_total,
 .el-pager,
 button {
 display: flex;
 align-items: center;
 }
 }
}
</style>

5、组件地址

gitHub组件地址

gitee码云组件地址

基于ElementUi/Antd再次封装基础组件文档

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

c3ab8389e65ecb71ac0)**