iviewのテーブルコンポーネントを使用する場合、外部からcolumn.jsファイルをインポートする必要があるのですが、外部ファイルでは使用できないことが分かり、ネット記事を参考に以下の方法を書きました。
1. まず、内部変数と関数を外部 js ファイルに追加します。
列.js
let _this = null
export default {
// 接收从外部传入的this,并赋给_this
receive(vm) {
_this = vm
},
// column是表格列对象
columns: [{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('Button', {
on: {
click: () => {
_this.showName(params.row)}
}
}, '按钮')
}
}]
}
2. 次に、この外部 js ファイルを vue ページにインポートし、これを渡します
ページビュー
import columns from './columns.js'
export default {
data() {
tableColumns = columns.columns
},
methods: {
// 外部js文件中可以调用这个方法_this.showName
showName(value) {
console.log(value.name)
}
},
created() {
// 把this传入这个外部文件里的receive方法中
columns.receive(this)
}
}
このステップを通過すると、これを外部ファイルで使用できるようになります。