TablePageDemo.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <table-page-template>
  3. <el-form slot='form' :inline='true' :model='formInline' size='mini'>
  4. <el-form-item label='审批人'>
  5. <el-input v-model='formInline.user' placeholder='审批人'></el-input>
  6. </el-form-item>
  7. <el-form-item label='活动区域'>
  8. <el-select v-model='formInline.region' placeholder='活动区域'>
  9. <el-option label='区域一' value='shanghai'></el-option>
  10. <el-option label='区域二' value='beijing'></el-option>
  11. </el-select>
  12. </el-form-item>
  13. <el-form-item>
  14. <el-button type='primary' @click='query'>查询</el-button>
  15. </el-form-item>
  16. <el-form-item label='审批人'>
  17. <el-input v-model='formInline.user' placeholder='审批人'></el-input>
  18. </el-form-item>
  19. <el-form-item label='备选项'>
  20. <el-radio-group v-model='radio2'>
  21. <el-radio :label='3'>备选项3</el-radio>
  22. <el-radio :label='6'>备选项6</el-radio>
  23. <el-radio :label='9'>备选项9</el-radio>
  24. </el-radio-group>
  25. </el-form-item>
  26. <el-form-item label='审批人'>
  27. <el-input v-model='formInline.user' placeholder='审批人'></el-input>
  28. </el-form-item>
  29. <el-form-item label='复选框'>
  30. <el-checkbox-group v-model='checkList' @change='checkListChange'>
  31. <el-checkbox label='复选框 A'>复选框 1</el-checkbox>
  32. <el-checkbox label='复选框 B'></el-checkbox>
  33. <el-checkbox label='复选框 C'></el-checkbox>
  34. <el-checkbox label='禁用' disabled></el-checkbox>
  35. <el-checkbox label='选中且禁用' disabled></el-checkbox>
  36. </el-checkbox-group>
  37. </el-form-item>
  38. </el-form>
  39. <el-table
  40. slot='table'
  41. ref='multipleTable'
  42. :data='tableData3'
  43. border
  44. tooltip-effect='dark'
  45. style='width: 100%'
  46. @selection-change='handleSelectionChange'
  47. >
  48. <el-table-column type='selection' width='55'></el-table-column>
  49. <el-table-column label='日期' width='120'>
  50. <template slot-scope='scope'>{{ scope.row.date }}</template>
  51. </el-table-column>
  52. <el-table-column prop='name' label='姓名' width='120'></el-table-column>
  53. <el-table-column prop='address' label='地址' show-overflow-tooltip></el-table-column>
  54. </el-table>
  55. <base-pagination :total='456' @pageChanged='pageChanged' slot='pagination'></base-pagination>
  56. </table-page-template>
  57. </template>
  58. <script>
  59. export default {
  60. name: 'DemoTable',
  61. data() {
  62. return {
  63. radio2: 3,
  64. checkList: ['选中且禁用', '复选框 A'],
  65. formInline: {
  66. user: '',
  67. region: ''
  68. },
  69. tableData3: [],
  70. tableData: [
  71. {
  72. date: '2016-05-03',
  73. name: '王小虎',
  74. address: '上海市普陀区金沙江路 1518 弄'
  75. },
  76. {
  77. date: '2016-05-02',
  78. name: '王小虎',
  79. address: '上海市普陀区金沙江路 1518 弄'
  80. }
  81. ],
  82. multipleSelection: [],
  83. total: 456
  84. }
  85. },
  86. methods: {
  87. onSubmit() {
  88. console.log('submit!')
  89. },
  90. checkListChange() {
  91. console.log('checkListChange ' + JSON.stringify(this.checkList))
  92. },
  93. handleSelectionChange(val) {
  94. console.log('handleSelectionChange --> ' + val)
  95. this.multipleSelection = val
  96. },
  97. handleSizeChange(size) {
  98. console.log('handleSizeChange --> ' + size)
  99. },
  100. handleCurrentChange(page) {
  101. console.log('handleCurrentChange --> ' + page)
  102. },
  103. query() {
  104. this.postJson('/server/getTableData', {}, resp => {
  105. console.log(resp)
  106. })
  107. },
  108. pageChanged(page, size) {
  109. console.log('pageChanged size=' + size + ', page = ' + page)
  110. }
  111. },
  112. created() {
  113. this.$store.dispatch('setBreadcrumb', [{ label: 'Demo' }, { label: 'Table' }])
  114. for (let i = 0; i < 50; i++) {
  115. this.tableData3.push({
  116. date: '2016-05-03',
  117. name: '王小虎',
  118. address: '上海市普陀区金沙江路 1518 弄'
  119. })
  120. }
  121. }
  122. }
  123. </script>