vue+element-ui表格自定義列模版的實現(xiàn)

更新時間：2024年05月06日 10:46:00 作者：JOEY P

本文主要介紹了vue+element-ui表格自定義列模版的實現(xiàn),通過插槽完美解決了element-ui表格自定義列模版的問題,具有一定的參考價值,感興趣的可以了解一下

前言

日前vue3項目中用element-ui表格封裝一個組件，有自定義表列格式的需求，做完后順手總結(jié)一下

一、為什么要自定義表列模版？

后端返回的數(shù)據(jù)往往比較原始，比如狀態(tài)是數(shù)值，而我們要給它轉(zhuǎn)成中文并用不同顏色標(biāo)記，這種場景很常見

二、實現(xiàn)步驟

1.封裝表格組件

代碼如下（示例）：

通過插槽v-slots實現(xiàn)

// 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
                    }}
                />
            </>
        )
    }
})

兩步就好，不多不少。