ZBLOG

看起来你提供的是一个 Vue.js 组件的代码片段,但代码中存在一些语法错误和不完整的部分。以下是对这个代码的修正和补充,以确保它能够正常工作:

  1. <template>
  2. <div class="CollaborationReminder">
  3. <div class="page-form-area">
  4. <a-form :model="formState" name="time-related-controls">
  5. <a-row>
  6. <a-col :span="8">
  7. <a-form-item label="借据号">
  8. <a-input v-model:value="formState.loanInfoCode"></a-input>
  9. </a-form-item>
  10. </a-col>
  11. <a-col :span="8">
  12. <a-form-item style="margin-left: 40px">
  13. <a-button class="margin-right-10" type="primary" @click="queryTable" htmlType="submit">查询</a-button>
  14. <a-button @click="reset">重置</a-button>
  15. </a-form-item>
  16. </a-col>
  17. </a-row>
  18. </a-form>
  19. </div>
  20. <a-table
  21. :columns="columns"
  22. :data-source="data"
  23. :pagination="{ pageSize: pageSize, showSizeChanger: true, showQuickJumper: true }"
  24. :rowClassName="(record,index) => (index % 2 === 0 ? 'red-row' : '')"
  25. >
  26. <!-- 在这里添加其他表格相关内容 -->
  27. </a-table>
  28. <!-- 显示总记录信息 -->
  29. <div>显示 ${range[0]}~ ${range[1]}条记录,共 ${total} 条记录</div>
  30. </div>
  31. </template>
  32. <script setup lang="ts">
  33. import { ref, reactive } from 'vue';
  34. import { Cooperation } from '../../utils'; // 确保引入了正确的模块
  35. const formState = reactive({
  36. loanInfoCode: ''
  37. });
  38. const data = ref([]);
  39. const pageSize = ref(5);
  40. const columns = [
  41. {
  42. title: '借据号',
  43. dataIndex: 'loanInfoCode',
  44. key: 'loanInfoCode'
  45. },
  46. {
  47. title: '催记链接',
  48. dataIndex: 'fileAddr',
  49. key: 'fileAddr'
  50. }
  51. ];
  52. const queryTable = () => {
  53. const searchParams = {
  54. custId: '11101',
  55. loanInfoCode: formState.loanInfoCode
  56. };
  57. const cirparams = {
  58. draw: 1,
  59. length: pageSize.value,
  60. start: 0,
  61. order: [],
  62. search: { regex: false, value: searchParams }
  63. };
  64. Cooperation(cirparams)
  65. .then((response) => {
  66. data.value = response.data;
  67. console.log('请求成功:', response);
  68. })
  69. .catch((error) => {
  70. console.error('请求失败:', error);
  71. });
  72. };
  73. const reset = () => {
  74. formState.loanInfoCode = '';
  75. };
  76. const handlePageSizeChange = (current, size) => {
  77. console.log(`每页条数变化为:${size}`);
  78. pageSize.value = size;
  79. };
  80. </script>
  81. <style scoped>
  82. .red-row {
  83. background-color: #f9f9f9; /* 可根据需求更改背景色 */
  84. }
  85. </style>

修正点:

  1. HTML 标签闭合:确保所有 HTML 标签都被正确闭合。
  2. v-model 用法:在 <input> 元素中使用 v-model:value,并且应当闭合标签。
  3. Pagination 属性:将分页属性放在对象中传递,并设置适当的选项。
  4. JavaScript 部分:修复了语法错误,并完善了函数定义。
  5. 样式:添加了一些基本样式以区分偶数行。

请根据自己的具体需求进一步修改和完善代码。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19430

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?