tjTable.vue 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <div class='tj-list'>
  3. <div class='eq-list-top'>
  4. <el-input
  5. placeholder='请输入类别或品牌搜索'
  6. size='small'
  7. @change='getList'
  8. prefix-icon='el-icon-search'
  9. v-model='keyword'
  10. style='width:200px;margin-right:12px'
  11. ></el-input>
  12. </div>
  13. <el-table :data='tableData' style='width: 100%'>
  14. <el-table-column type='index' label='序号' width='80'></el-table-column>
  15. <el-table-column prop='lb' label='类别' width='160'></el-table-column>
  16. <el-table-column prop='sl' label='数量'></el-table-column>
  17. <el-table-column prop='brand' label='品牌'></el-table-column>
  18. <el-table-column prop='unit' label='单位'></el-table-column>
  19. </el-table>
  20. <div class='foot'>
  21. <el-pagination
  22. background
  23. layout='prev, pager, next'
  24. :total='total'
  25. :page-size='size'
  26. @prev-click='pageChanged'
  27. @next-click='pageChanged'
  28. @current-change='pageChanged'
  29. ></el-pagination>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import { queryEquipmentList } from '@/api/equipmentList.js'
  35. export default {
  36. data() {
  37. return {
  38. pageSize: 10,
  39. tableData: [],
  40. total: 0,
  41. currentPage: 1,
  42. size: 10,
  43. keyword: ''
  44. }
  45. },
  46. props: ['major', 'param'],
  47. methods: {
  48. pageChanged(page, size) {
  49. this.currentPage = page
  50. this.getList()
  51. },
  52. getList() {
  53. let postParams = {
  54. tab_code: this.param
  55. }
  56. let data = {
  57. page: this.currentPage,
  58. size: this.size,
  59. plazaId: this.$store.state.plazaId,
  60. major: this.major,
  61. keyword: this.keyword
  62. }
  63. queryEquipmentList({ data, postParams }).then(res => {
  64. this.tableData = res.data.data
  65. this.total = res.data.count
  66. })
  67. }
  68. },
  69. watch: {
  70. param(newV, oldV) {
  71. if (newV !== oldV) {
  72. this.getList()
  73. }
  74. }
  75. },
  76. mounted() {
  77. this.getList()
  78. }
  79. }
  80. </script>
  81. <style lang="less" scoped>
  82. .tj-list {
  83. .eq-list-top {
  84. display: flex;
  85. }
  86. .foot {
  87. position: absolute;
  88. height: 32px;
  89. right: 26px;
  90. }
  91. td {
  92. overflow: hidden;
  93. text-overflow: ellipsis;
  94. white-space: nowrap;
  95. }
  96. }
  97. </style>