对ant design vue 1.x 组件进行二次封装
<a-tableref="tableElRef"v-bind="getBindValues" // 通过计算属性,获取父级传入的非prop属性:columns="columns":data-source="virtualData" // 需要对原有属性进行二次改造,则设置prop@expand="expand" // 改造原有事件同理@expandedRowsChange="expanded
·
<a-table
ref="tableElRef"
v-bind="getBindValues" // 通过计算属性,获取父级传入的非prop属性
:columns="columns"
:data-source="virtualData" // 需要对原有属性进行二次改造,则设置prop
@expand="expand" // 改造原有事件同理
@expandedRowsChange="expandedRowsChange"
>
<template
v-for="column in columns"
:slot="column.scopedSlots?column.scopedSlots.customRender:''"
slot-scope="text,record,index"
>
<slot
:name="column.scopedSlots?column.scopedSlots.customRender:''"
v-bind="{text, record, index}"
></slot>
</template>
<!-- 表头插槽 -->
<template
v-for="column in columns"
:slot="column.slots?column.slots.title:''"
>
<slot :name="column.slots?column.slots.title:''"></slot>
</template>
</a-table>
// 通过计算属性获取父级attrs,作为table的props
computed: {
getBindValues () {
return { ...this.$attrs }
},
},
使用
<WeTable
:rowKey="record=>record.code"
:specialKey="specialKey"
:columns="columns"
:data-source="list"
:pagination="false"
:scroll="{ y: 'calc(100vh - 200px)' }"
size="small"
bordered
>
<span
slot="action"
slot-scope="{ record }"
class="flex justify-evenly text-blue-500"
>
<a-tooltip title="新增子级">
<a-icon
v-if="enum_type_code === 'TREE'"
type="plus"
@click="add(record)"
/>
</a-tooltip>
<a-tooltip title="编辑">
<a-icon
type="edit"
@click="edit(record)"
/>
</a-tooltip>
<a-popconfirm
:title="deleteTitle(record)"
@confirm="remove(record)"
>
<a-tooltip title="删除">
<a-icon type="delete" />
</a-tooltip>
</a-popconfirm>
</span>
</WeTable>
到这里你可能会发现,antd官方文档的表格插槽里面不是slot-scope="text, record"形式吗?
这是因为他的组件是使用渲染函数封装的,并不是模板,在渲染函数中是可以实现slot-scope传多个参数的,可以参考文档渲染函数的插槽部分
this.$scopedSlots.customRender(text, record, index)
但我这里的二次封装使用的模板
另外,如果对事件没有别的处理,可以直接使用$listener实例属性绑定事件
总之,要想清晰的完成一个组件的二次封装,实例属性必须要非常清楚
更多推荐
已为社区贡献2条内容
所有评论(0)