在iview的Table組件中烹棉，render函數(shù)非常好用纠屋，可以極大程度的解決定制化的需求。那么自定義指令在render函數(shù)中如何使用呢鹦牛？且看下面分解。
自定義指令
以下以一個(gè)防止按鈕快速重復(fù)點(diǎn)擊為例
- 新建一個(gè)一個(gè)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函數(shù)中使用自定義指令
columns: [
{
title: '已匹配合同人數(shù)',
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: '錯(cuò)誤',
content: res.message
})
}
}
},
// 使用自定義指令
directives: [
{
name: 'setTimeClick',
// 如有其他參數(shù)可以在此添加
}
]
},'催辦')
])
}
},
]
