index.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <u-index-list @scrolltolower="scrolltolower" class="user_list" :style="{ height: height }" :index-list="indexList">
  3. <view v-for="(item, index) in itemArr" :key="index">
  4. <u-index-item :key="index">
  5. <u-index-anchor class="user_anchor" :text="indexList[index]"></u-index-anchor>
  6. <user-item
  7. @itemClick="itemClick"
  8. @updateCheck="updateCheck"
  9. :checked="checkedIDList.includes(cell.userID)"
  10. :disabled="disabledIDList.includes(cell.userID)"
  11. :checkVisible="showCheck"
  12. v-for="cell in item"
  13. :item="cell"
  14. :key="cell.userID"
  15. />
  16. </u-index-item>
  17. </view>
  18. </u-index-list>
  19. </template>
  20. <script>
  21. import UserItem from '../UserItem/index.vue';
  22. export default {
  23. name: 'ChooseIndexList',
  24. components: {
  25. UserItem
  26. },
  27. props: {
  28. height: {
  29. type: String,
  30. default: '0px'
  31. },
  32. indexList: {
  33. type: Array,
  34. default: () => []
  35. },
  36. itemArr: {
  37. type: Array,
  38. default: () => []
  39. },
  40. checkedIDList: {
  41. type: Array,
  42. default: () => []
  43. },
  44. disabledIDList: {
  45. type: Array,
  46. default: () => []
  47. },
  48. showCheck: {
  49. type: Boolean,
  50. default: false
  51. }
  52. },
  53. data() {
  54. return {};
  55. },
  56. methods: {
  57. itemClick(item) {
  58. this.$emit('itemClick', item);
  59. },
  60. updateCheck(item) {
  61. this.$emit('updateCheck', item);
  62. },
  63. scrolltolower() {
  64. this.$emit('scrolltolower');
  65. }
  66. }
  67. };
  68. </script>
  69. <style scoped lang="scss">
  70. .user_list {
  71. flex: 1;
  72. ::v-deep uni-scroll-view {
  73. max-height: 100% !important;
  74. }
  75. }
  76. .user_anchor {
  77. background-color: #f8f8f8 !important;
  78. border: none !important;
  79. }
  80. </style>