vue中用Element-ui封装表单(form)和表格(table)组件动态渲染数据展示(2)

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

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

  

<el-button :type=“item.type” :size=“item.size || size” @click=‘item.handle()’>{{item.label}}

table.vue

<el-button v-for=‘(item , index) in tableHandles’ :size=“item.size || size” :type=“item.type” :icon=‘item.icon’ @click=“item.handle()” :key=“index”>{{item.label}}

<el-table

:data=‘tableData’

:size=‘size’

:border =‘isBorder’

@select=‘select’

@select-all=‘selectAll’

v-loading=‘loading’

header-row-class-name=“header_row_style”

:defaultSelections=‘defaultSelections’

ref=“cesTable”>

<el-table-column v-for=“item in tableCols”

:key=“item.id”

:prop=“item.prop”

:label=“item.label”

:width=“item.width”

:align=“item.align”

show-overflow-tooltip

:render-header=“item.require?renderHeader:null”

<el-button v-for=“(btn , index) in item.btnList”

:disabled=“btn.isDisabled && btn.isDisabled(scope.row)”

:type=“btn.type”

:size=“btn.size || size”

:icon=“btn.icon”

:key=“index”

@click=“btn.handle(scope.row)”>{{btn.label}}

<el-input v-if=“item.type===‘Input’” v-model=“scope.row[item.prop]” :size=“size”

:disabled=“btn.isDisabled && btn.isDisabled(scope.row)”

@focus=“item.focus && item.focus(scope.row)”>

<el-select v-if=“item.type===‘Select’” v-model=“scope.row[item.prop]” :size=“size” :props=“item.props”

:disabled=“btn.isDisabled && btn.isDisabled(scope.row)”

@change=‘item.change && item.change(scope.row)’>

<el-radio-group v-if=“item.type===‘Radio’” v-model=“scope.row[item.prop]”

:disabled=“btn.isDisabled && btn.isDisabled(scope.row)”

@change=‘item.change && item.change(scope.row)’>

{{ra.label}}

<el-checkbox-group v-if=“item.type===‘Checkbox’” v-model=“scope.row[item.prop]”

:disabled=“btn.isDisabled && btn.isDisabled(scope.row)”

@change=‘item.change && item.change(scope.row)’>

{{ra.label}}

<el-rate v-if=“item.type===‘Rate’” v-model=“scope.row[item.prop]”

:disabled=“btn.isDisabled && btn.isDisabled(scope.row)”

@change=‘item.change && item.change(scope.row)’>

<el-switch v-if=“item.type===‘Switch’” v-model=“scope.row[item.prop]”

:disabled=“btn.isDisabled && btn.isDisabled(scope.row)”

@change=‘item.change && item.change(scope.row)’>

<img v-if=“item.type===‘Image’” :src=“scope.row[item.prop]” @click=“item.handle && item.handle(scope.row)”/>

<el-slider v-if=“item.type===‘Slider’” v-model=“scope.row[item.prop]”

:disabled=“btn.isDisabled && btn.isDisabled(scope.row)”

@change=‘item.change && item.change(scope.row)’>

<span v-if=“!item.type”

:style=“item.itemStyle && item.itemStyle(scope.row)”

:class=“item.itemClass && item.item.itemClass(scope.row)”>{{(item.formatter && item.formatter(scope.row)) || scope.row[item.prop]}}

<el-pagination style=‘display: flex;justify-content: center;height: 100%;align-items: center;’

@current-change=“handleCurrentChange”

@size-change=“handleSizeChange”

layout=“total,sizes ,prev, pager, next,jumper”

:page-size=“pagination.pageSize”

:current-page=“pagination.pageNum”

:total=“pagination.total”