破烂熊-整理过往(1)

作者:破烂熊

简介:国内知名大学本硕毕业,从事软件项目研发工作斤7年,主要从事油田行业及市政软件项目管理及开发工作,用到的技术主要是J2EE方向


目前本人打算将自己过往用到的软件技术进行整理,开发出项目实例,供自己积累和方便他人进行学习,下一步将贴出本项目(暂且称为项目,将其代号定为【瑞安】)方案包括用到的开发技术及框架、实现的功能等。


QQ交流群:[瑞安]J2EE交流群 366353184

### 实现 Element Plus Table 组件中的序号列 为了在 `Element Plus` 的 `Table` 组件中添加一个与后端数据无关的序号列,可以采用内置的 `type="index"` 或者自定义模板的方式。 #### 使用内置 index 类型 最简单的方法是利用 `el-table-column` 提供的 `type="index"` 属性来创建自动增加的序号列: ```html <el-table :data="tableData"> <!-- 序号列 --> <el-table-column type="index" label="序号" width="80"></el-table-column> <!-- 其他列... --> </el-table> ``` 这种方式会默认按照表格展示顺序给每一行分配一个唯一的编号[^1]。 #### 自定义计算序号 如果希望更灵活地控制序号(比如考虑分页情况),则可以通过作用域插槽来自定义序号显示逻辑。对于带有分页功能的情况,真实的序号应该基于当前页面位置以及每页大小进行调整: ```html <el-table :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <!-- 计算真实序号 --> <el-table-column label="序号" width="80"> <template #default="scope"> {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }} </template> </el-table-column> <!-- 更多列配置... --> </el-table> ``` 其中涉及到的状态管理如下所示: ```javascript const state = reactive({ pagination: { currentPage: 1, pageSize: 10 }, }); ``` 此方法允许更加精确地反映实际记录在整个列表中的相对位置[^4]。 #### 控制父子节点序号显示 当存在树形结构的数据时,可能只想要父项拥有独立的序号而不影响子项,则可以在模板内加入条件判断语句: ```html <el-table-column label="No." width="100"> <template #default="{ row }"> <span v-if="!row.children">{{ $index + 1 }}</span> </template> </el-table-column> ``` 这里假设没有 `children` 字段表示该行为根节点;当然也可以根据具体业务需求修改这个判定标准[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值