userlist.html 4.2 KB

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