最后
基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack、git、node学习的再好也无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多,并不是理解就ok了,有些是真的要去记。当然了我们是牛x的前端工程师,每天像背英语单词一样去背知识点就没必要了,只要平时工作中多注意总结,面试前端刷下题目就可以了。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
1、代码示例
<t-pagination-select
v-model="materialId"
:optionSource="materialIdArr"
labelKey="materialName"
valueKey="id"
:paginationOption="setSelectPage"
/>
2、配置参数(Attributes)继承 el-select Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 绑定值 | boolean / string / number/Array | - |
optionSource | 下拉数据源 | Array | - |
width | select宽度(可以设置百分比或px) | String | 100% |
valueKey | 传入的 option 数组中,要作为最终选择项的键值 key | String | ‘key’ |
labelKey | 传入的 option 数组中,要作为显示项的键值名称 | String | ‘label’ |
paginationOption | 分页配置项 | Object | - |
2-1、paginationOption配置参数(Attributes)继承 el-pagination Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
currentPage | 当前页数 | number | 1 |
pageSize | 每页显示条目个数 | number | 6 |
pagerCount | 设置最大页码按钮数。 页码按钮的数量,当总页数超过该值时会折叠 | number | 5 |
total | 总条目数 | number | 0 |
layout | 组件布局,子组件名用逗号分隔 | string | ‘total,prev, pager, next’ |
bind | el-pagination属性 | Object | - |
3、继承 el-select&&el-pagination events
四、源码
<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 // 总条数
}
}
### 最后
为了帮助大家更好的了解前端,特别整理了《前端工程师面试手册》电子稿文件。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)