Combines Table and Page components of iview UI together. Based on Vue 2.x.
$ npm i --save iview-table-page
or
$ yarn add iview-table-page
由于iview page组件show-elevator属性可以显示跳转页面，但是在跳转页面的输入框输入页面后，页面没有跳转。iview-table-page组件解决了这个问题。
Import modules and set up settings in main.js:
import Vue from 'vue'
import iviewTablePage from 'iview-table-page'
Vue.use(iviewTablePage)<template>
<div>
<iviewTablePage
border
:columns="columns7"
:data="data6"
:total='total'
>
</iviewTablePage>
</div>
</template>
<script>
import iviewTablePage from 'iview-table-page'
export default {
components: { iviewTablePage },
data () {
return {
columns7: [
{
title: 'Name',
key: 'name',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.name)
])
}
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: 'Action',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h(
'Button',
{
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
},
'View'
),
h(
'Button',
{
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
},
'Delete'
)
])
}
}
],
data6: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park'
}
],
total: 4
}
}
}
</script>MIT