element-ui中el-table表格的使用(如何取到当前列的所有数据)
基本使用都不多说了,
我们知道这个表格组件,每个单元格内容是table绑定的data中的某个属性决定的,但是如果我们想根据这个属性值,渲染出另一个值呢,首先问题来了,我如何获得当前列的值,
查了查,我们可以用插槽来自定义显示的内容
template
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column label="姓名" width="180"> <template slot-scope="scope"> {{aa(scope.row.name)+scope.$index}} </template> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
data
tableData: [{ date: '2016-05-02', name: '小明', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '小超', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王虎', address: '上海市普陀区金沙江路 1516 弄' }]
methods
aa(name){ var str='' switch(name) { case '小明': str="哈哈" break; default: str=name; } return str; }
上诉代码,template中黄色部分就是自定义单元格内容的方式(具名插槽)
scope.row:可以取到当前列的所有数据
scope.$index:是当前列的索引
上诉代码的一个作用是,当列的name属性是小明时,在该单元格显示“哈哈”
分类:
element-UI
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」