测试后的iview的表格
<template>
<GPage bg>
<div>
<div class="table">
<Button class="button"
@click="add">Add</Button>
<Table :columns="columns"
:data="data"
class="table-fixbug"></Table>
</div>
</div>
</GPage>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
columns: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '姓名',
key: 'name',
render: (h, { row, index }) => {
return h('Input', {
props: {
value: row.name
},
on: {
input: val => {
this.data[index].name = val
}
}
})
}
},
{
title: '爱好',
key: 'hobby',
render: (h, { row, index }) => {
return h('Select', {
props: {
value: row.hobby
},
on: {
'on-select': val => {
this.data[index].hobby = val
}
}
},
this.options.map(item => {
return h('Option', {
props: {
value: item,
label: item
}
})
})
)
}
},
{
title: '职业',
key: 'job',
render: (h, { row, index }) => {
return h('Input', {
props: {
value: row.job
},
on: {
input: val => {
this.data[index].job = val
}
}
})
}
},
{
title: 'operation',
key: 'operation',
render: (h, { row, index }) => {
return h(
'a',
{
on: {
click: () => {
this.data.splice(index, 1)
}
}
},
'Delete'
)
}
}
],
data: [
{
name: '',
hobby: '',
job: ''
}
],
options: ['电影', '游戏', '看书']
}
},
methods: {
add () {
const addData = {
name: '',
hobby: '',
job: ''
}
this.data.push(addData)
}
}
}
</script>
<style lang="less" scoped>
.table {
text-align: left;
}
.button {
margin-bottom: 20px;
}
.table-fixbug {
overflow: visible;
}
</style>
