index.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <script setup lang="ts">
  2. import { ref } from "vue";
  3. import { useColumns } from "./columns";
  4. const selectRef = ref();
  5. const {
  6. columns,
  7. pagination,
  8. selectValue,
  9. tableDataEdit,
  10. rowStyle,
  11. onRowClick
  12. } = useColumns(selectRef);
  13. </script>
  14. <template>
  15. <el-select
  16. ref="selectRef"
  17. v-model="selectValue"
  18. class="w-[200px]!"
  19. placeholder="请选择"
  20. value-key="id"
  21. clearable
  22. >
  23. <template #empty>
  24. <div class="m-4">
  25. <pure-table
  26. row-key="id"
  27. alignWhole="center"
  28. :header-cell-style="{
  29. background: 'var(--el-fill-color-light)',
  30. color: 'var(--el-text-color-primary)'
  31. }"
  32. :row-style="rowStyle"
  33. :data="
  34. tableDataEdit.slice(
  35. (pagination.currentPage - 1) * pagination.pageSize,
  36. pagination.currentPage * pagination.pageSize
  37. )
  38. "
  39. :columns="columns"
  40. :pagination="pagination"
  41. @row-click="onRowClick"
  42. />
  43. </div>
  44. </template>
  45. </el-select>
  46. </template>