tjTable.vue 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!-- 设备清单的有select的表格 标准设备表格 -->
  2. <template>
  3. <div class='tj-list'>
  4. <div class='eq-list-top'>
  5. <a-input-search placeholder='请按照类别或品牌搜索' v-model='keyword' style='width: 192px;margin-left:12px;height:32px;' @search='getList' />
  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='brand' label='品牌'></el-table-column>
  12. <el-table-column prop='unit' 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 { queryEquipmentList } from '@/api/equipmentList.js'
  29. export default {
  30. data() {
  31. return {
  32. pageSize: 10,
  33. tableData: [],
  34. total: 0,
  35. currentPage: 1,
  36. size: 10,
  37. keyword: ''
  38. }
  39. },
  40. props: ['major', 'param'],
  41. methods: {
  42. pageChanged(page, size) {
  43. this.currentPage = page
  44. this.getList()
  45. },
  46. getList() {
  47. let postParams = {
  48. tab_code: this.param
  49. }
  50. let data = {
  51. page: this.currentPage,
  52. size: this.size,
  53. plazaId: this.$store.state.plazaId,
  54. major: this.major,
  55. keyword: this.keyword
  56. }
  57. queryEquipmentList({ data, postParams }).then(res => {
  58. this.tableData = res.data.data
  59. this.total = res.data.count
  60. })
  61. }
  62. },
  63. watch: {
  64. param(newV, oldV) {
  65. if (newV !== oldV) {
  66. this.getList()
  67. }
  68. }
  69. },
  70. mounted() {
  71. this.getList()
  72. }
  73. }
  74. </script>
  75. <style lang="less" scoped>
  76. .tj-list {
  77. .eq-list-top {
  78. display: flex;
  79. }
  80. .foot {
  81. position: absolute;
  82. height: 32px;
  83. right: 26px;
  84. }
  85. td {
  86. overflow: hidden;
  87. text-overflow: ellipsis;
  88. white-space: nowrap;
  89. }
  90. }
  91. </style>