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属性是小明时,在该单元格显示“哈哈”

 

posted @   古墩古墩  Views(33044)  Comments(0Edit  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示