封装封装Vue Element的的table表格组件的示例详解表格组件的示例详解
在封装Vue组件时，我依旧会交叉使用函数式组件的方式来实现。关于函数式组件，我们可以把它想像成组件里的一个函数，入参是渲染上下文(render context)，返回值是渲染好的HTML(VNode)。它比
较适用于外层组件仅仅是对内层组件的一次逻辑封装，而渲染的模板结构变化扩展不多的情况，且它一定是无状态、无实例的，无状态就意味着它没有created、mounted、updated等Vue的生命周期函
数，无实例就意味着它没有响应式数据data和this上下文。
我们先来一个简单的Vue函数式组件的例子吧，然后照着这个例子来详细介绍一下。
export default {
functional: true,
props: {},
render(createElement, context) {
return createElement('span', 'hello world')
}
}
Vue提供了一个functional开关，设置为true后，就可以让组件变为无状态、无实例的函数式组件。因为只是函数，所以渲染的开销相对来说较小。
函数式组件中的Render函数，提供了两个参数createElement和context，我们先来了解下第一个参数createElement。
createElement说白了就是用来创建虚拟DOM节点VNode的。它接收三个参数，第一个参数可以是DOM节点字符串，也可以是一个Vue组件，还可以是一个返回DOM节点字符串或Vue组件的函数；第二
个参数是一个对象，这个参数是可选的，定义了渲染组件所需的参数；第三个参数是子级虚拟节点，可以是一个由createElement函数创建的组件，也可以是一个普通的字符串如：’hello world’，还可以是
一个数组，当然也可以是一个返回DOM节点字符串或Vue组件的函数。
createElement有几点需要注意：
createElement第一个参数若是组件，则第三个参数可省略，即使写上去也无效；
render函数在on事件中可监听组件$emit发出的事件
在2.3.0之前的版本中，如果一个函数式组件想要接收prop，则props选项是必须的。在2.3.0或以上的版本中，你可以省略props选项，组件上所有的attribute都会被自动隐式解析为prop。
函数式组件中Render的第二个参数是context上下文，data、props、slots、children以及parent都可以通过context来访问。
在2.5.0及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：<template functional></template>， 但是如果Vue组件中的render函数存在，则Vue构造函数不会从template选项
或通过el选项指定的挂载元素中提取出的HTML模板编译渲染函数，也就是说一个组件中templete和render函数不能共存，如果一个组件中有了templete，即使有了render函数，render函数也不会执行，
因为template选项的优先级比render选项的优先级高。
到这里，Vue函数式组件介绍的就差不多了，我们就来看看Element的表格组件是如何通过函数式组件来实现封装的吧。
效果图：
1、所封装的table组件
<template>
<el-table :data="config.tableData" style="width: 100%" v-on="cfg.on" v-bind="cfg.attrs">
<el-table-column v-if="cfg.hasCheckbox" type="selection" width="55" label="xx" />
<el-table-column v-for="n in cfg.headers" :prop="n.prop" :label="n.name" :key="n.prop" v-bind="{...columnAttrs, ...n.attrs}">
<template slot-scope="{row}">
<Cell :config="n" :data="row" />
</template>
</el-table-column>
</el-table>
</template>
<script>
import Cell from './cell'
export default {
components: {
Cell,
},
props: {
config: Object,
},
data(){
return {
columnAttrs: {
align: 'left',
resizable: false,
},
cfg: {
on: this.getTableEvents(),
attrs: {
border: true,
stripe: true,
},
...this.config,
},
checked: [],
}
},
methods: {
getTableEvents(){
let {hasCheckbox = false} = this.config, events = {}, _this = this;
if(hasCheckbox){
//绑定事件
Object.assign(events, {
'selection-change'(v){
_this.checked = v;
},
资源评论
weixin_38692202
- 粉丝: 3
- 资源: 951
最新资源
- 2024下半年，CISSP官方10道练习题
- JD-Core是一个用JAVA编写的JAVA反编译器 .zip
- 时间复杂度与数据结构：算法效率的双重奏
- QT 简易项目 网络调试器(未实现连接唯一性) QT5.12.3环境 C++实现
- YOLOv3网络架构深度解析：关键特性与代码实现
- ACOUSTICECHO CANCELLATION WITH THE DUAL-SIGNAL TRANSFORMATION LSTM NETWORK
- 深入解析：动态数据结构与静态数据结构的差异
- YOLOv2：在YOLOv1基础上的飞跃
- imgview图片浏览工具v1.0
- Toony Colors Pro 2 2.2.5的资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
