tjTable.vue 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!-- 设备清单的有select的表格 -->
  2. <template>
  3. <div class='tj-list'>
  4. <div class='eq-list-top'>
  5. <a-input-search placeholder style='width: 192px;margin-left:12px;height:32px;' @search='onSearch' />
  6. </div>
  7. <el-table :data='tableData' style='width: 100%'>
  8. <el-table-column type='index' label='序号' width='80'></el-table-column>
  9. <el-table-column prop='lb' label='类别' width='160'></el-table-column>
  10. <el-table-column prop='sl' label='数量'></el-table-column>
  11. <el-table-column prop='unit' label='单位'></el-table-column>
  12. <el-table-column prop='brand' label='品牌'></el-table-column>
  13. </el-table>
  14. <div class='foot'>
  15. <el-pagination
  16. background
  17. layout='prev, pager, next'
  18. :total='total/pageSize'
  19. :page-size='size'
  20. @prev-click='pageChanged'
  21. @next-click='pageChanged'
  22. @current-change='pageChanged'
  23. ></el-pagination>
  24. </div>
  25. </div>
  26. </template>
  27. <script>
  28. import Select from '@/components/Select/Select.vue'
  29. import { queryEquipmentList } from '@/api/equipmentList.js'
  30. export default {
  31. components: { Select },
  32. data() {
  33. return {
  34. pageSize: 10,
  35. dataSelect2: [
  36. { id: 'test1', name: '选择项' },
  37. { id: 'test2', name: '单平米' },
  38. { id: 'test3', name: '下级分项' },
  39. { id: 'test4', name: '滑动平均滑动平均' }
  40. ],
  41. tableData: [],
  42. total: 0,
  43. currentPage: 1,
  44. size: 10
  45. }
  46. },
  47. props: [],
  48. methods: {
  49. handleChange() {},
  50. onSearch() {},
  51. pageChanged(page, size) {
  52. this.currentPage = page
  53. this.size = size
  54. this.getList()
  55. },
  56. getList() {
  57. let getParams = {
  58. page: this.currentPage,
  59. size: this.size,
  60. major: '弱电',
  61. system: 'MJ'
  62. // orderBy: 1,
  63. // keyword: ''
  64. }
  65. queryEquipmentList({ getParams }).then(res => {
  66. console.log(res)
  67. this.tableData = res.data
  68. this.total = res.count
  69. })
  70. }
  71. },
  72. mounted() {
  73. this.getList()
  74. }
  75. }
  76. </script>
  77. <style lang="less" scoped>
  78. .tj-list {
  79. .eq-list-top {
  80. display: flex;
  81. }
  82. .foot {
  83. position: absolute;
  84. height: 32px;
  85. right: 26px;
  86. bottom: 20px;
  87. }
  88. td {
  89. overflow: hidden;
  90. text-overflow: ellipsis;
  91. white-space: nowrap;
  92. }
  93. }
  94. </style>