iview的渲染逻辑_vue + iview 组件的渲染

一、iview 在Table组件中使用Poptip组件

colKey: [

{

title: '产品图',

key: 'pic',

sortable: true,

render: function(h, param){

return h('div', [

h('Button', [

h('Poptip', {

props: {

confirm: true,

title: '确定要删除吗！',

type: 'error',

size: 'small'

},

on: {

'on-ok': ()=>{

this.$Message.info('点击了确定')

},

'on-cancel': ()=>{

this.$Message.info('点击了确定')

}

}

}, '删除')

])

]);

}

]

二、poptip中渲染table

render: (h, params) => {

let column = [

{

title: "游戏",

key: "name"

},

{

title: "占成",

key: "rate"

}

];

let data = [];

let gameList = params.row.gameList;

let len = gameList.length;

for (let item of gameList) {

let obj = {};

obj.rate = item.rate + "%";

obj.name = item.name;

data.push(obj);

}

return h(

"Poptip",

{

props: {

trigger: "hover"

}

},

[

h(

"span",

{

style: {

cursor: "pointer",

color: "#20a0ff"

}

},

len + "款游戏"

),

h("Table", {

props: {

columns: column,

data: data,

border: true,

size: "small",

width: 250

},

slot: "content"

})

]

);

}

3.实现效果：表格表头中含有icon，鼠标移入icon,有文字提示

{

title: '本月充值金额(元)',

key: 'money',

renderHeader: h => {

return h('div', [

h('Tooltip', {

props: {

content: '已去除折扣、当月充值退款金额，未去除本月之前充值在本月退款、转出的金额'

},

style: { marginRight: '5px', cursor: 'pointer' }

}, ['',

h('Icon', {

props: { type: 'ios-information-outline', slot: 'content', size: '20' }

})]),

h('span', '本月充值金额(元)')

]);

}

}

4.表格内部，某一列的内容可以编辑

点击编辑icon，input框显示，里面内容为当前列内容；

点击对勾icon,进行保存；点击叉号icon，恢复原始值。

{

title: '备注',

className: 'editCell',

render: (h, params) => {

/* eslint max-len: 0 */

const remark = params.row.remark;

return h('div', {}, [

h('span', {

style: {display: this.currentRowIndex === params.index ? 'none' : 'inline-block', marginRight: '4px'}

}, remark),

h('input', {

attrs: { value: remark, class: 'special-input' },

style: {

width: '86px', height: '32px', display: this.currentRowIndex === params.index ? 'inline-block' : 'none', marginRight: '4px'

}

}),

h('i', {

attrs: { class: 'ivu-icon ivu-icon-edit' },

style: { display: this.currentRowIndex === params.index ? 'none' : 'inline-block', cursor: 'pointer' },

on: {

click: () => {

this.currentRowIndex = params.index; // this.currentRowIndex: 记录当前操作行的index

}

}

}),

h('i', {

attrs: { class: 'ivu-icon ivu-icon-checkmark' },

style: {

display: this.currentRowIndex === params.index ? 'inline-block' : 'none', cursor: 'pointer', marginRight: '4px'

},

on: {

click: e => {

const siblingEles = e.target.parentNode.children;

let newRemark = '';

/* eslint no-plusplus: 0 */

for (let i = 0; i < siblingEles.length; i++) {

if (siblingEles[i].tagName === 'INPUT') newRemark = siblingEles[i].value;

}

this._changeInvoiceRemark(newRemark, params.row.id);

}

}

}),

h('i', {

attrs: { class: 'ivu-icon ivu-icon-close' },

style: { display: this.currentRowIndex === params.index ? 'inline-block' : 'none', cursor: 'pointer' },

on: {

click: e => {

const siblingEles = e.target.parentNode.children;

for (let i = 0; i < siblingEles.length; i++) {

if (siblingEles[i].tagName === 'INPUT') siblingEles[i].value = remark;

}

this.currentRowIndex = null; // 清空索引

}

}

})

]);

}

}

}