1. 需求
使用的IView的Table组件，数据都是绑定好自动渲染的，想要给指定的单元格添加两个按钮，实现单元格内的数据加减控制，效果图如下
2. 问题
因为iview的组件 数据都是绑定好自动渲染，因此想要给指定的单元格增加两个按钮，却是不容易操作。
查询官网的说明，以及各个大佬博客的分享，最终使用render 解决了问题。
3. 解决方案
使用render 来渲染自定义组件
template
<template>
<i-table border :columns="columns1" :data="data1" @on-row-click='openLibraryContactDetail'></i-table>
</template>
data
data () {
return {
columns1: [
{
title: '作者',
key: 'Author'
},
{
title: '出版社',
key: 'Publisher'
},
{
title: '出版地',
key: 'PubPlace'
},
{
title: '总数量',
key: 'TotalQty',
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
size: 'small'
},
style: {
marginLeft: '5px'
},
on: {
click: e => {
e.stopPropagation() // 阻止冒泡事件
this.loading = true
let userInfo = sessionStorage.getItem('userInfo')
let userData = JSON.parse(userInfo)
// 下面是我调用的自己的接口，当然 也可以执行其它的函数
AdjustBookInventory({
StoreId: userData.StoreId,
StBookId: params.row.Id,
BookQty: -1
})
.then(res => {
this.loading = false
params.row.TotalQty = params.row.TotalQty - 1
})
.catch(err => {
console.log(err)
})
}
}
}, '-'),
h('span', {
style: {
display: 'inline-block',
width: '20px',
}
}, params.row.TotalQty),
h('Button', {
props: {
size: 'small'
},
style: {
position: 'relative'
},
on: {
click: e => {
e.stopPropagation() // 阻止冒泡事件
this.loading = true
let userInfo = sessionStorage.getItem('userInfo')
let userData = JSON.parse(userInfo)
AdjustBookInventory({
StoreId: userData.StoreId,
StBookId: params.row.Id,
BookQty: +1
})
.then(res => {
this.loading = false
params.row.TotalQty = params.row.TotalQty + 1
})
.catch(err => {
console.log(err)
})
}
}
}, '+')
])
}
}
],
其中render 的参数 params 是当前行的数据 click: e e是事件自带参数，触发点击事件 就会产生e。
e.stopPropagation() 是为了阻止冒泡事件，点击按钮时候，不会触发iview的table组件的@on-row-click事件
其中render 的简单形式如下所示
render: (h, params) => {
return h('div', [
h('Button', {
props: {
size: 'small'
},
on: {
click: e => {
console.log('-')
}, '-'),
h('span', {
style: {
width: '20px',
}
}, 666),
h('Button', {
props: {
size: 'small'
},
on: {
click: e => {
console.log('+')
}
}, '+')
])
}