在iview的Table组件中，render函数非常好用，可以极大程度的解决定制化的需求。那么自定义指令在render函数中如何使用呢？且看下面分解。
自定义指令
以下以一个防止按钮快速重复点击为例
- 新建一个一个js文件，定义自定义指令
// preventReClick.js
import Vue from 'vue'
Vue.directive('preventReClick', {
inserted(el, binding) {
el.addEventListener('click',() => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
},2000)
}
})
}
})
- 全局引入自定义指令
// main.js
import "@/directive/preventReClick";
在Render函数中使用自定义指令
columns: [
{
title: '已匹配合同人数',
key: 'matchCount',
minWidth: 80,
render: (h,params) => {
return h('div',{
style: {
display: 'flex',
justifyContent: 'space-between'
}
},[
h('span',params.row.matchCount),
h('Button',{
style: {
display: params.row.canPress && (Number(params.row.numberCount) > params.row.matchCount) ? 'inline-block' : 'none',
height: '24px',
padding: '0 5px'
},
on: {
click: async() => {
let data = {
incomeBatchId: params.row.id,
settlementId: params.row.settlementId
}
let res = await pressToMatchContract(data)
if (res.code === 10200 && res.isSuccess) {
this.$Message.success('催办成功')
} else {
this.$Modal.error({
title: '错误',
content: res.message
})
}
}
},
// 使用自定义指令
directives: [
{
name: 'setTimeClick',
// 如有其他参数可以在此添加
}
]
},'催办')
])
}
},
]
