Test.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <xc-select-v2 v-model="obj"
  3. value="tcode" label="tname"
  4. :data="data" :remote-method="testmethod"/>
  5. 测试:
  6. <el-button @click="test1">清空</el-button>
  7. <el-button @click="generateData">生成数据</el-button>
  8. <xc-table :data="tableData" row-key="code" localPaging small>
  9. <el-table-column type="selection" reserve-selection/>
  10. <el-table-column label="编码" prop="code"></el-table-column>
  11. <el-table-column label="名称" prop="name"></el-table-column>
  12. <el-table-column label="其他" prop="qita"></el-table-column>
  13. </xc-table>
  14. </template>
  15. <script setup name='Test'>
  16. import sleep from "@/utils/sleep";
  17. import XcTable from "@/components/xc/xc-table/XcTable.vue";
  18. let dataV2 = $ref([])
  19. let tableData = $ref({
  20. data: [],
  21. currentPage: 1,
  22. pageSize: 30,
  23. total: 0
  24. })
  25. const vChange = (val) => {
  26. console.log(val)
  27. }
  28. const obj = $ref({
  29. tcode: '',
  30. tname: ''
  31. })
  32. let data = $ref([])
  33. const generateData = () => {
  34. for (let i = 0; i < 1000; i++) {
  35. data.push({
  36. value: i.toString(),
  37. label: i === 4 ? 'asdghashjgdhjasgdhjasgdhjasgdhjasgdjhasdg' : 'test' + i
  38. })
  39. }
  40. }
  41. const testmethod = async (val) => {
  42. console.log('触发查询事件', val)
  43. let length = Math.ceil((Math.random() * 10) * 100)
  44. let index = Math.ceil((Math.random() * 10) * 10)
  45. data = []
  46. for (let i = 0; i < length; i++) {
  47. if (i === index) {
  48. data.push({
  49. value: val,
  50. label: i + 'label' + '数据'
  51. })
  52. }
  53. data.push({
  54. value: val + i,
  55. label: i + 'label'
  56. })
  57. }
  58. await sleep(2000)
  59. obj.tname = ''
  60. data = []
  61. }
  62. const test1 = async () => {
  63. data = []
  64. await sleep(1000)
  65. obj.tcode = 'ad' + Math.ceil((Math.random() * 10))
  66. console.log(obj.tcode)
  67. }
  68. let searchMethod = $ref('')
  69. const te = (val) => {
  70. searchMethod = val
  71. console.log(val)
  72. }
  73. for (let i = 0; i < 1000; i++) {
  74. let children = []
  75. if (i % 3 === 0) {
  76. for (let j = 0; j < 10; j++) {
  77. children.push({
  78. code: 'code' + i,
  79. name: 'name' + i,
  80. qita: 'qita' + 12,
  81. });
  82. }
  83. }
  84. tableData.data.push({
  85. code: 'code' + i,
  86. name: 'name' + i,
  87. qita: 'qita' + 12,
  88. children: children
  89. })
  90. }
  91. console.log(tableData)
  92. tableData.total = tableData.data.length
  93. </script>
  94. <style scoped>
  95. </style>