文章目录
js
路由配置对象
js
复制代码
const router = [
{
path: '/xxx', // 路由路径：当浏览器地址栏为 /xxx 时匹配此路由
name: 'xxx', // 路由名称：可用于编程式导航
component: () => import('../xxx/xxx/xxx.vue'), // 指定该路由对应的组件，使用动态 import 实现懒加载（按需加载）
meta: { // 定义元信息
auth: true, // 设置访问该页面的权限，需要用户已登录（权限控制用）
title: '账单明细' // 设置页面标题（可在路由守卫中读取并 document.title = to.meta.title）
}
}
]
组件定义
js
复制代码
export default {
name: 'xxx', // 组件的注册名称，可用于调试工具或递归组件调用。
props: {}, // 定义父组件传递给该组件的属性（props）。为空表示不接受外部传参
data() { // 组件的响应式数据
return {
isClosed: false,
statusDefault: '',
companyName: '',
typeDefault: '',
statusList: [],
typeList: [],
orderNo: '',
startTime: '',
endTime: '',
tableData: [],
pagination: {
pageSize: 10, // 每页显示的条数
currentPage: 1, // 当前页码
total: 0 // 数据总条数
},
}
},
component: {
// 用于注册局部子组件
// 当前写成 component（单数）会导致子组件无法正确注册
},
methods: {
// 定义组件内的方法（如搜索、重置、分页切换等）
}
html
el-date-picker日期选择器组件
html
复制代码
<div class="form-item clearfix">
<span class="form-label">结束日期</span>
<el-date-picker // Element UI 的日期选择器组件，用于选择日期
v-model="dateEnd" // Vue 的双向数据绑定，输入框的内容会实时同步到 Vue 实例的dateEnd变量中；
type="date" // 类型是日期，而不是年月/时间
clearable // 允许清空已选择的日期
placeholder="选择日期"> // 占位提示文字
</el-date-picker>
<span class="can-click search-button" @click="doSearch">查询</span>
// 点击事件绑定，点击 "查询" 按钮会触发 Vue 实例中的doSearch方法（查询数据的核心逻辑）。
</div>
el-table表格组件
html
复制代码
<el-table
:data="tableData"
:border="true"
style="width: 100%"
>
<!-- :data="tableData" 数据绑定核心属性，tableData 是 Vue 组件 data 中定义的数组，数组里的每个对象对应表格的一行数据 -->
<!-- :border="true"：布尔类型的绑定属性，设置为 true 表示显示表格的边框 -->
<el-table-column
prop="companyName"
label="xxx"
fixed
min-width="120"
>
<!-- 该列要展示 tableData 中每行数据的 companyName 属性值
表格表头
固定列属性，设置后该列会固定在表格左侧，当表格横向滚动时不会消失
列的最小宽度为 120px，保证内容不会被过度挤压，同时支持自适应拉伸 -->
</el-table-column>
<el-table-column
prop="deposit"
label="xxx"
align="right"
min-width="100"
>
<template slot-scope="scope">
<span class="can-click detail-btn" style="color: #2388FB" @click="turnTo('/deposit/'+scope.row.companyId)">{{scope.row.deposit}}</span>
<!-- Element UI 表格的作用域插槽，scope 是插槽的上下文对象，包含当前行的所有数据：
scope.row：表示当前行的数据对象
渲染当前行的 deposit 字段值 -->
</template>
</el-table-column>
el-select下拉选择组件
html
复制代码
<el-select v-model="typeDefault">
<el-option
v-for="item in typeList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<!-- Element UI/Plus 提供的下拉选择组件。
v-model:双向绑定，将用户选择的值自动同步到 Vue 实例中的 typeDefault 数据属性；同时，typeDefault 的初始值也会决定默认选中项。
<el-option>：表示下拉菜单中的每一个选项。
v-for="item in typeList"：遍历 typeList 数组（通常是一个对象数组），为每个 item 渲染一个选项。
:key="item.id"：Vue 的 key 属性
:label="item.name"：显示在下拉列表中的文字内容（用户看到的名称）。
:value="item.id"：该选项被选中时，实际赋给 v-model的值。
-->
html
复制代码
<el-pagination
layout="prev, pager, next,sizes, jumper, total"
background
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:page-sizes="[10,15, 30, 50, 100]"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
:total="pagination.total">
</el-pagination>
<!--
设置分页组件的布局顺序：
• prev：上一页按钮
• pager：页码列表
• next：下一页按钮
• sizes：每页显示条数选择器
• jumper：跳转到指定页输入框
• total：显示总条数（如"共 100 条"）
background:为页码按钮添加背景色（视觉更清晰）
当前页码改变时触发的事件，回调函数接收新页码（currentPage）作为参数
每页条数（pageSize）改变时触发的事件，回调函数接收新条数作为参数
定义"每页显示条数"下拉选项，用户可从中选择
绑定当前页码（通常来自 data 中的 pagination.currentPage）
绑定每页显示的条数（如 10、30 等）
绑定数据总条数，用于计算总页数和显示"共 X 条"
-->