iview的Table之render函式設定DOM屬性值的方法
阿新 • • 發佈:2019-02-06
需求:使用iview的Table元件實現上述表格
<Table border :columns="columns" :data="list" no-data-text="暫無專案"></Table>
columns: [
{
title: '專案名稱',
key: 'name',
align: 'center',
width: 240,
render: (h, params) => {
return h('div',
{
style: {
padding: '10px',
}
}, [
h('img', {
domProps: {
src: '../../../static/images/data/p1.jpg',
},
props : {},
style: {
marginBottom: '5px',
width: '155px',
height: '89px'
},
}),
h('p', params.row.name)
]);
}
},
{
title : '提交日期',
key: 'time',
width:135,
align:'center'
},
{
title: '認購人數',
key: 'rgrs',
width:100,
align:'center'
},
{
title: '認購金額',
key: 'rgj',
width:100,
align:'center'
},
{
title: '完成',
key: 'wc',
width:100,
align:'center'
},
{
title: '狀態',
key: 'zt',
width:120,
align:'center'
},
{
title: '操作',
key: 'action',
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'dashed'
},
style: {
// marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '管理專案'),
]);
}
}
],
list: [
{
name: 'John Brown',
time: '2018-08-08 22:00',
rgrs: '88',
rgj: '¥812112',
wc: '5.55%',
zt: '稽核不通過',
},
{
name: 'John Brown',
time: '2018-08-08 22:00',
rgrs: '88',
rgj: '¥8',
wc: '5.55%',
zt: '稽核不通過',
},
{
name: 'John Brown',
time: '2018-08-08 22:00',
rgrs: '88',
rgj: '¥8',
wc: '5.55%',
zt: '稽核不通過',
},
]
注:如果想要讓列表返回的是一個img標籤,並且設定img的src,這裡不能用props,而是要用domProps!
props是iview內建元件的設定樣式用法