在Vue3中使用 tsx / jsx + 插槽（element-plus中的tsx写法与插槽）

本文介绍: 在Vue3中使用 tsx / js x + 插槽（element–plus中的tsx 写法与插槽）今天在学习使用 element–plus的虚拟化表格时，遇到了一个问题，就是需要在表格项中自定义渲染内容（比如渲染一个Ta g 标签，渲染一个下拉框组件等）可见官网示例：Vi rtu ali zed Table 虚拟化表格 | Element Plus (element–plus.org)。在组件标签中有个 v–slot s 属性，给里面传入一个对象，键是插槽名，值是render 函数。

今天在学习使用 element–plus的虚拟化表格时，遇到了一个问题，就是需要在表格项中自定义渲染内容（比如渲染一个Tag标签，渲染一个下拉框组件等）可见官网示例：Virtualized Table 虚拟化表格 | Element Plus (element-plus.org)

关于js x / tsx 可以自行搜索相关文档去学习，我是因为之前学习过react所以了解。

但是官方给的示例中，只示例了一些普通的组件的使用，并没有告诉如何使用插槽（原本在vue的template 中写，是直接写template 插槽即可，但是在tsx中不能这么写）。经过多方查找，终于找到了方法，就是在组件标签中有个 v–slo ts 属性，给里面传入一个对象，键是插槽名，值是render 函数。

比如 element–plus中的Pop over组件，就有两个插槽，一个是默认插槽，一个是具名插槽。要想在tsx中使用，需要这样：

下面这个是在vue的template标签中的写法。

&lt;template&gt;
    &lt;el-popover :width="300" &gt;
        &lt;template #reference&gt;
            这里是普通内容
        &lt;/template&gt;
        <template #default>
            这里是悬浮之后，弹出的提示框的内容
        </template>
    </el-popover>
</template>

但是在tsx中，不能这样写，会报错。我们需要这样：

<script lang="tsx" setup>
import { Column, ElPopover } from 'element-plus';
const columns: Column<any>[] = [
    {
        key: 'id',
        title: '',
        dataKey: 'id',
        width: 40,
        align: 'center',
        cellRenderer: ({ cellData: id }) => (
            <ElPopover width={300} v-slots={{
                reference: () => <div>这里是普通内容</div>,
                default: () => <div>这里是悬浮之后，弹出的提示框的内容</div>
            }}>
            </ElPopover>
        )
    }
]
</script>

解释及 tsx的注意事项：

1. 首先注意script标签的 lang 写的是 tsx 或 js x，才能在里面写tsx 代码。

2. 和vue不一样的是，在js x / tsx中，想使用变量是单花括号 { xxx } （vue是双花括号 {{ }} 或者属性前加上冒号）。所以在v–slots属性中，虽然用了双括号，但是实际上传递的其实是一个对象，里面写的东西要遵循对象的写法（键值对）。v-slots中：键是插槽名，值是r ender 函数

3. 组件名不能用 el–popover 的写法，需要使用双驼峰命名法 ElPop over

4. tsx中给事件绑定函数，使用 onXxxx = { } 的写法，比如 onClic k={ }，括号里面写函数的名字（不是字符串）。如果想传递参数，则这样写 onClic k={ () => xxx(id) }。传递一个高阶的箭头函数。

下面给出我用 el ement-plus的虚拟化表格的代码示例（基于Nuxt3，所以额外嵌套了一个client–only标签）

<template>
    <div class="list">
        <client-only>
            <el-table-v2 :columns="columns" :data="list" :width="1300" :height="600"/>
        </client-only>
    </div>
</template>
<script lang="tsx" setup> 
import { ElDropdown, ElDropdownMenu, ElTag, ElTooltip, ElDropdownItem, } from 'element-plus'
import { Loading as LoadingIcon } from '@element-plus/icons-vue'
import type { Column } from 'element-plus'
/**表头数据 */
const columns: Column<any>[] = [ 
    {
        key: '_name',
        title: '歌名',
        dataKey: '_name',
        width: 500, 
    },
    {
        key: '_artists',
        title: '歌手',
        dataKey: '_artists',
        width: 275,
    },
    {
        key: '_album',
        title: '专辑',
        dataKey: '_album',
        width: 275,
    },
    {
        key: 'fee',
        title: '标签',
        dataKey: 'fee',
        width: 100,
        align: 'center',
        cellRenderer: ({ cellData: fee }) => (
            <ElTooltip content={fee === 0 ?
                '免费' : fee === 1 ?
                    'VIP' : fee === 4 ?
                        '专辑' : '可听'}>
                {
                    fee === 0 ?
                        <ElTag type="success">免费</ElTag> : fee === 1 ?
                            <ElTag type="warning">VIP</ElTag> : fee === 4 ?
                                <ElTag type="info">专辑</ElTag> : <ElTag type="success">可听</ElTag>
                }

            </ElTooltip>
        ),
    },
    {
        key: '_time',
        title: '时长',
        dataKey: '_time',
        width: 70,
    },
    {
        key: 'id',
        title: '',
        dataKey: 'id',
        width: 40,
        cellRenderer: () => <ElDropdown v-slots={{
            dropdown: ({ cellData: id }: { cellData: number }) => <ElDropdownMenu>
                <ElDropdownItem onClick={() => del(id)}>
                    删除
                </ElDropdownItem>
                <ElDropdownItem disabled>待添加</ElDropdownItem>
            </ElDropdownMenu>
        }}>
            <span style={{ color: 'var(--center-color)' }}>...</span>
        </ElDropdown>
    },
]
const del = (id: number)=>{ }
/** 测试列表 */
const list: Array<tableData> = [
    {
        _name: '歌曲名',
        _album: '专辑名',
        _artists: '歌手名',
        _time: '时长'
        id: 0,
        fee: 0
    }
]
</script>