Vue3中Slot插槽透传,二次封装Arco的table组件
Vue3 插槽透传
需求是这样, 对acro的table表格进行二次封装。
封装成一个 组件。要求二次封装的组件可以将slot透传给原生的table组件。
如下这样,将SearchTable
中的插槽透传给
1 2 3 4 5 | {{ record }} - {{ rowIndex }} - {{ column }} {{ record }} - {{ rowIndex }}- {{ column }} {{ record }} - {{ rowIndex }}- {{ column }} |
一共有下面几个字段:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const cols = [ { title: '渠道编码' , dataIndex: 'channelCode' , slotName: 'channelCode' , }, { title: '渠道名称' , dataIndex: 'channelName' , slotName: 'channelName' , }, { title: '状态' , dataIndex: 'status' , slotName: 'status' , }, ]; |
步骤
首先我们先明白原组件的使用。
arco
中的table组件, 当定义了插槽就渲染插槽。当没有定义的时候就正常显示table表格中的数据。
因为我们要对table组件进行二次封装,所以我们要将table中的插槽透传出去。下面是实现原理。
1. 知道父组件传递了一个slot
这里我们要用一个vue3中的API,useSlots()
, 我们要用这个api来判断父组件是否传递了插槽。
- 从slots中获取父组件传的插槽信息,如果没有则就使用
arco
中默认的。即正常展示。当自定义了插槽, 就选择插槽的内容。 - 插槽的参数传递是
v-slot:[key]="{ record, rowIndex, column }"
这里的参数是arco
中传递的。 - 然后我们在透传给我们的自己的插槽。
1 | :name= "key" v-bind= "{ rowIndex: rowIndex, record: record, column: column }" |
1 2 3 4 | import { useSlots, } from 'vue' ; const slots = useSlots(); |
2. 父组件使用
1 2 3 4 5 | {{ record }} - {{ rowIndex }} - {{ column }} {{ record }} - {{ rowIndex }}- {{ column }} {{ record }} - {{ rowIndex }}- {{ column }} |
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。