首页 前端知识 在Vue3中使用 tsx / jsx 插槽 (element-plus中的tsx写法与插槽)

在Vue3中使用 tsx / jsx 插槽 (element-plus中的tsx写法与插槽)

2024-05-29 10:05:59 前端知识 前端哥 782 82 我要收藏

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

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

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

        比如element-plus中的Popover组件,就有两个插槽,一个是默认插槽,一个是具名插槽。要想在tsx中使用,需要这样:

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

<template>
    <el-popover :width="300" >
        <template #reference>
            这里是普通内容
        </template>
        <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 或 jsx,才能在里面写tsx代码。

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

3. 组件名不能用 el-popover 的写法,需要使用双驼峰命名法 ElPopover

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

下面给出我用element-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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9963.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!