const vm = new Vue({
el: '#app',
data() {
return {
columns: [{
title: '序号',
key: 'index'
}, {
title: '选择',
key: 'index',
render: (h, params) => {
const getOptions = () => {
let res = []
this.selectList.map((v, k) => {
res.push(
h('Option', {
props: {
value: v.id
}
}, v.text)
)
})
return res
}
return h('div', [
h('Select', {
props: {
value: params.row.selected
},
on: {
'on-change':(e) => {
this.tableData[params.index].selected = e
}
}
}, getOptions())
]);
}
}, {
title: '选择结果',
render: (h, params) => {
return h('div', [
this.getSelectedTextById(params.row.selected)
]);
}
}],
tableData: [{
index: 1,
selected: 0
}, {
index: 2,
selected: 1
}],
selectList: [{
id: 0,
text: '选项1'
}, {
id: 1,
text: '选项2'
}, {
id: 2,
text: '选项3'
}]
}
},
methods: {
getSelectedTextById(id) {
let res = ''
this.selectList.map((v, k) => {
if(v.id == id) res = v.text
})
return res
}
}
})
<div id="app">
<i-table border :columns="columns" :data="tableData"></i-table>
</div>