myTable.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <uni-table ref="table" :loading="loading" stripe emptyText="暂无更多数据">
  3. <uni-tr>
  4. <uni-th align="center">
  5. <image src="../../static/tip.svg" style="width: 35rpx;height: 35rpx;"></image>
  6. </uni-th>
  7. <uni-th v-for="(item, index) in column" :key="index" align="center">{{item}}</uni-th>
  8. </uni-tr>
  9. <uni-tr v-for="(item, index) in tableData" :key="index">
  10. <uni-td align="center">
  11. <view :style="{
  12. 'width': '20rpx',
  13. 'height': '20rpx',
  14. 'background-color': 'green',
  15. 'border-radius': '50%',
  16. 'display': 'inline-block'
  17. }"
  18. ></view>
  19. </uni-td>
  20. <uni-td align="center" v-for="(val,key,idx) in item" :key="idx">{{ val }}</uni-td>
  21. <uni-td align="center" width="180">
  22. <view class="uni-group">
  23. <button class="uni-button" size="mini" type="primary" @click="handleBL(item)">办理</button>
  24. <button class="uni-button" size="mini" type="warn">删除</button>
  25. </view>
  26. </uni-td>
  27. </uni-tr>
  28. </uni-table>
  29. <view class="uni-pagination-box">
  30. <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
  31. </view>
  32. </template>
  33. <script setup>
  34. import {ref} from "vue"
  35. const props = defineProps({
  36. column:{
  37. type: Array,
  38. default: []
  39. },
  40. tableData:{
  41. type: Array,
  42. default: []
  43. },
  44. pageCurrent:{
  45. type: Number,
  46. default: 1
  47. },
  48. pageSize:{
  49. type: Number,
  50. default: 10
  51. },
  52. total:{
  53. type: Number,
  54. default: 0
  55. },
  56. loading:{
  57. type: Boolean,
  58. default: false
  59. },
  60. blUrl:{
  61. type: String,
  62. default: ''
  63. }
  64. })
  65. const table = ref()
  66. function change(){
  67. }
  68. function handleBL(item){
  69. uni.reLaunch({
  70. url: props.blUrl + '&name=' + item.name
  71. })
  72. }
  73. </script>
  74. <style lang="scss" scope>
  75. .uni-group {
  76. display: flex;
  77. flex-direction: row;
  78. justify-content: space-around;
  79. align-items: center;
  80. }
  81. .uni-pagination-box{
  82. padding: 20rpx;
  83. .uni-pagination{
  84. justify-content: end;
  85. }
  86. }
  87. ::v-deep .uni-table{
  88. min-width: 800rpx !important;
  89. }
  90. </style>