前景:做后台管理几乎每个页面都有Table和Form,不想每次去粘贴复制,所以尝试对Table进行二次封装,实现传入table配置项,直接渲染出对应的Table组件。
核心:此次封装主要利用v-bind
传入一个对象的所有 property
,实现属性穿透,例如:
const obj = {
type: 'selection', width: '50' }
<el-table-column v-bind="obj"> </el-table-column>
//等价于
<el-table-column :type="selection" :width="50"> </el-table-column>
这个在配合v-bind="$attrs"
进行一些组件封装时很实用,具体怎么使用可以参考这篇文章【Vue进阶】——如何实现组件属性透传?
最终实现源码:
<template>
<div class="table">
<el-table :data="tableData" style="width: 100%">
<template v-for="(v, i) in tableConfig">
<!-- self属性用于标记需要做特殊操作的一些列 -->
<el-table-column v-if="v.self && v.self.body" :key="i" v-bind="v">
<template slot-scope="scope">
<slot :name="v.self.body" :row="scope.row" :index="scope.$index"></slot>
</template>
</el-table-column>
<el-table-column v-else :key="i" v-bind="v"> </el-table-column>
</template