1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8">
| <title>iview example</title>
| <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
| <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
| <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
| <style>
| #app{padding: 32px;}
| </style>
| </head>
| <body>
| <div id="app">
| <i-table border :columns="columns7" :data="data6"></i-table>
| </div>
| <script>
|
| var Main = {
| 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'
| }
| ]
| }
| },
| methods: {
| show (index) {
| this.$Modal.info({
| title: 'User Info',
| content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
| })
| },
| remove (index) {
| this.data6.splice(index, 1);
| }
| }
| }
|
| var Component = Vue.extend(Main)
| new Component().$mount('#app')
| </script>
| </body>
| </html>
|
|
