vue element-kb88凯时官网登录

前言

日前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,
        default: 'height: 150px;overflow-y: auto'
    },
    showheader: {
        type: boolean as proptype,
        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 () => (
            <>
                

                    0 } showheader={ props.showheader } v-model:data={ props.tabledata } style={{width: '100%'}}>
                        {props.columns?.map((item) => (
                             item.render? item.render(scope.row):undefined
                                }}
                                />
                        ))}
                    
                    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 }/>
                
            
        )
    }
})

2.父组件引用

代码如下（示例）：

在columns中提供render

// parentcomponent
export default definecomponent({
    name: 'parent',
    setup() {
        const columns = [
            {key: 'type', prop: 'type', label: 'type', render: (row) => { row.type }}, 
            {key: 'parsetrue', prop: 'parsetrue', label: 'parsetrue', render: (row) => {
                return row.parsetrue? 语法正确 : 语法错误
            }}, 
            {key: 'explaintrue',prop: 'explaintrue', label: 'explaintrue', render: (row) => {
                return row.explaintrue? 逻辑正确 : 逻辑错误
            }}, 
            {key: 'explaintime', prop: 'explaintime', label: 'explaintime'}, 
            {key: 'sql', prop: 'sql', label: 'sql'}
        ]
        const tabledata = ref([])
        const total = ref(0)
        return () => (
            <>
                
            
        )
    }
})

两步就好，不多不少。

总结

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