内容 element table 组件 column内容如何自定义
来源:网站优化作者:佚名发布时间:2021-09-22 15:53:19
上面的评论好像都没有关注重点,重点是要通过columns来定义列显示内容,而不必改变自定义的组件本身。看了一下iview的源码内容,它是将createElement方法传到了columns的render方法里,通过vue的render渲染函数实现了组件内容的自定义。下面把关键代码贴一下。
自定义组件
{{scope.row[column.prop]}}
expand组件
export default {
name: 'TableExpand',
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null,
},
},
render: (h, ctx) => {
const params = {
row: ctx.props.row,
index: ctx.props.index,
}
if (ctx.props.column) params.column = ctx.props.column
return ctx.props.render(h, params)
},
}
需要自定义时的columns
{
prop: 'auther',
label: '作者',
width: '180',
render: (h, params) => {
return h('input', {
style: {
width: '100%',
height: '30px',
},
})
},
},
优搜云-网站seo快速排名优化系统,支持百度、360、搜狗、神马四大搜索引擎做关键词优化推广。拥有全新百度优化算法,新站降权站皆可做单词、整站优化,是能免费试词的百度seo推广公司
本文标签: