vue+element-ui表格自定义列模版的实现

 更新时间:2024年05月06日 10:46:00   作者:JOEY P  
本文主要介绍了vue+element-ui表格自定义列模版的实现,通过插槽完美解决了element-ui表格自定义列模版的问题,具有一定的参考价值,感兴趣的可以了解一下

前言

日前vue3项目中用element-ui表格封装一个组件,有自定义表列格式的需求,做完后顺手总结一下

一、为什么要自定义表列模版?

后端返回的数据往往比较原始,比如状态是数值,而我们要给它转成中文并用不同颜色标记,这种场景很常见

二、实现步骤

1.封装表格组件

代码如下(示例):

通过插槽v-slots实现

// data-table/index.tsx

import { ElPagination, ElTable, ElTableColumn } from "element-plus";
import { PropType, defineComponent } from "vue";

const props = {
    tableStyle: {
        type: String as PropType<string>,
        default: 'height: 150px;overflow-y: auto'
    },
    showHeader: {
        type: Boolean as PropType<boolean>,
        default: true
    },
    tableData: {
        type: Array
    },
    columns: {
        type: [Array, Object]
    },
    pagination: {
        type: Object,
        default: () => ({
            total: 0,
            page: 1,
            limit: 20,
            background: true,
            pageSizes: [10, 20, 30, 50],
            pagerCount: document.body.clientWidth < 992 ? 5 : 7,
            layout: '->, total, sizes, prev, pager, next, jumper',
        })
    }
}

export default defineComponent({
    name: 'data-table',
    props,
    setup(props) {
        const defaultBackground = true
        const defaultPageSizes = [10, 20, 30, 50]
        const defaultPagerCount = document.body.clientWidth < 992 ? 5 : 7
        const defaultLayout = '->, total, sizes, prev, pager, next, jumper'
        
        return () => (
            <>
                <div style={ props.tableStyle }>
                    <ElTable v-show={ props.tableData?.length>0 } showHeader={ props.showHeader } v-model:data={ props.tableData } style={{width: '100%'}}>
                        {props.columns?.map((item) => (
                            <ElTableColumn 
                                key={ item.key? item.key:item }
                                prop={ item.prop? item.prop:item }
                                label={ item.label? item.label:item }
                                sortable={ item.sortable }
                                v-slots={{
                                    default: (scope) => item.render? item.render(scope.row):undefined
                                }}
                                />
                        ))}
                    </ElTable>
                    <ElPagination 
                        v-show={ props.pagination.total>0 }
                        small 
                        total={ props.pagination.total }
                        background={ props.pagination.background || defaultBackground }
                        pageSizes={ props.pagination.pageSizes || defaultPageSizes }
                        pagerCount={ props.pagination.pagerCount || defaultPagerCount}
                        layout={ props.pagination.layout || defaultLayout }/>
                </div>
            </>
        )
    }
})

2.父组件引用

代码如下(示例):

在columns中提供render

// parentComponent

export default defineComponent({
    name: 'parent',
    setup() {
        const columns = [
            {key: 'type', prop: 'type', label: 'type', render: (row) => <ElTag>{ row.type }</ElTag>}, 
            {key: 'parseTrue', prop: 'parseTrue', label: 'parseTrue', render: (row) => {
                return row.parseTrue? <ElTag type='success'>语法正确</ElTag> : <ElTag type='danger'>语法错误</ElTag>
            }}, 
            {key: 'explainTrue',prop: 'explainTrue', label: 'explainTrue', render: (row) => {
                return row.explainTrue? <ElTag type='success'>逻辑正确</ElTag> : <ElTag type='danger'>逻辑错误</ElTag>
            }}, 
            {key: 'explainTime', prop: 'explainTime', label: 'explainTime'}, 
            {key: 'sql', prop: 'sql', label: 'sql'}
        ]
        const tableData = ref([])
        const total = ref(0)

        return () => (
            <>
                <DataTable
                    tableStyle='height: 500px;overflow-y: auto'
                    showHeader={ false }
                    columns={ columns }
                    tableData={ tableData.value }
                    pagination={{
                        total: total.value
                    }}
                />
            </>
        )
    }
})

两步就好,不多不少。

总结

通过插槽完美解决了element-ui表格自定义列模版的问题,可能还会有更复杂的场景,待遇到时再具体分析。

到此这篇关于vue+element-ui表格自定义列模版的实现的文章就介绍到这了,更多相关element表格自定义列模版内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 打通前后端构建一个Vue+Express的开发环境

    打通前后端构建一个Vue+Express的开发环境

    这篇文章主要介绍了打通前后端构建一个Vue+Express的开发环境,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue中key为index和id的区别示例详解

    Vue中key为index和id的区别示例详解

    这篇文章主要介绍了Vue中key为index和id的区别详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue 翻页组件vue-flip-page效果

    vue 翻页组件vue-flip-page效果

    这篇文章主要介绍了vue 翻页组件vue-flip-page,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 解决Vue3报错:Property “xxx“ was accessed during render but is not defined on instance.

    解决Vue3报错:Property “xxx“ was accessed during render but

    这篇文章主要给大家介绍了关于解决Vue3报错:Property “xxx“ was accessed during render but is not defined on instance.的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 使用 Vue 3 的 createApp方法初始化应用的基本步骤

    使用 Vue 3 的 createApp方法初始化应用的基本步骤

    createApp 是 Vue 3 引入的全局 API,用于创建一个应用实例,这篇文章主要介绍了如何使用 Vue 3 的 createApp方法初始化应用,通过 createApp 方法,我们从 Vue 3 的基本初始化开始,扩展到插件的应用、多个应用实例的创建等,需要的朋友可以参考下
    2024-05-05
  • Electron中打包应用程序及相关报错问题的解决

    Electron中打包应用程序及相关报错问题的解决

    这篇文章主要介绍了Electron中打包应用程序及相关报错问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate

    解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate

    这篇文章主要介绍了解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue实现无缝滚动手摸手教程

    vue实现无缝滚动手摸手教程

    这篇文章主要为大家介绍了vue实现无缝滚动手摸手教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue3 Echarts通用的折线图带阴影效果实现

    Vue3 Echarts通用的折线图带阴影效果实现

    在环保仓管项目中,做了一个每月对药品、消耗品、设备的进出,进行统计百分比,效果好看,后面经常在用这个样式,下面通过示例代码分享Vue3 Echarts通用的折线图带阴影效果实现,感兴趣的朋友一起看看吧
    2024-07-07
  • vue项目中使用bpmn-自定义platter的示例代码

    vue项目中使用bpmn-自定义platter的示例代码

    这篇文章主要介绍了vue项目中使用bpmn-自定义platter的实例代码,本文通过代码截图相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05

最新评论