zl程序教程

您现在的位置是:首页 >  其他

当前栏目

纪念一个关于Table-column Scoped Slot的小坑

2023-04-18 16:08:23 时间

用的element ui,有个需求

如上图所示,后台有的calendarIndexNew为空他就不传,有的不空就传.那么在前端展示时候我们就要有新的就传没有的就不传.

在我用prop各种尝试传的时候发现不可以.

不知道是啥原因,下次再问问我师父,现在不问了,一个问题问了好几遍,跟我说了,咱也没明白...

我这里用作用域插槽solt-scope解决了

 <table-block>
  <el-table :data="tablesData" style="width: 100%">
  <el-table-column 
      ```
 </el-table-column>
        `
        `
        `          

  <el-table-column     label="指标"    show-overflow-tooltip    width="200">
      <template  slot-scope="scope">
         {{scope.row.calendarIndexNew==null?scope.row.calendarIndex:scope.row.calendarIndexNew}}
     </template>
 </el-table-column>



 </el-table>
</table-block>
关于使用element ui的自定义列和表头,在element ui上有一段简单的介绍以及可使用的方法

如果有兴趣的可以看看https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot