el-table-render
npm i el-table-render // 安装
-
帮助你在el-table里面以配置化的写法,并支持render函数,你可以写jsx或render function
-
后续功能优化中
-
食用方法
<ElTableRender :columns="tableColumns" :data="tableData" height="300" />
const tableColumns = [
{
prop: 'name',
label: 名称,
width: '200px',
render:(h,{row})=>(
<div>{row.name}</div>
),
headerRender: (h,props) => (
<div>customTitle</div>
)
}
]
- 上源码
export default {
functional: true,
props: {
columns: {
type: Array,
default: () => []
}
},
render(h, ctx) {
return h(
'el-table',
{
props: {
...ctx.data.attrs
}
},
ctx.props.columns.map(column =>
h('el-table-column', {
props: {
...column
},
scopedSlots: column.type
? {}
: {
default: props => {
return column.render ? column.render(h, props) : props.row[column.prop]
},
header: props => {
return column.headerRender ? column.headerRender(h, props) : props.column.label
}
}
})
)
)
}
}