我要评论前言
日前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表格自定义列模版内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论