1. 程式人生 > >iview的Table之render函式設定DOM屬性值的方法

iview的Table之render函式設定DOM屬性值的方法

這裡寫圖片描述
需求:使用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內建元件的設定樣式用法