Iview中Table的render添加自定义指令如何用

Iview中Table的render添加自定义指令如何用

目前是用的Iview这个UI框架，有时候碰到比较多的问题基本是在table这个组件的render，其实可以创造很多有用的内容，之前在使用自定义指令的时候碰到问题，后面找了好多没找到解决办法，后面调整一下才发现问题。
直接上代码：

// 下载指令
Vue.directive('down', {
  inserted: ((el, binding) => {
    el.addEventListener('click', () => {
      let link = document.createElement('a')
      let url = binding.value
      console.log(url)
      fetch(url).then(res => res.blob()).then(blob => {
        link.href = URL.createObjectURL(blob)
        link.download = ''
        document.body.appendChild(link)
        link.click()
      })
    })
  })
})

之前一直把这个指令放在局部去做，但是完全没效果，然后把这个放到main.js里面，就可以升效了，应该是生命周期的问题。
接着就是在render里面看怎么引入：

// table的引用，数据绑定
<Table border :loading="loading" :columns="columns" :data="documentList"></Table>

data() {
	return {
		columns: [
			{
				title: '操作',
				render: (h, params) => {
					return h('Button', {
						// 重点在这块
						directives: [
		                  {
		                    name: 'down',  // 刚才写的指令的名称
		                    value: params.row.picture_oos_url // 要下载的图片路径
		                  }
		                ]
					}, '下载')
				}
			}
		]
	}
}

注： 指令一定要是全局的