el-table的render-header用法
el-table-column上用render-header加按钮
·
el-table,:render-header
<template>
<el-table :data="tabledata" style="width: 100%" border>
<el-table-column prop="oldOrderBy" label="排序" :render-header="renderHeader">
</el-table-column>
<el-table-column prop="productName" label="产品名称"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tabledata: [],
isDragon:true
};
},
created() {
this.getTableData()
},
methods: {
renderHeader(h, { column }) {
return h('span', { style: { padding: '0' } },
[
h('span', { style: { paddingRight: '3px' } }, column.label),
h('a', {
style: { color: '#008AE1', fontSize: '12px' },
on: { click: () => { this.isDragon = false } },
props: { content: column.label },
}, '编辑')
]
)
},
getTableData() {
this.tabledata = [{oldOrderBy:1,productName:'产品一'},
{oldOrderBy:2,productName:'产品二'}];
},
}
};
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)