欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Elementui 表格单元格数据操作

程序员文章站 2022-06-08 15:55:16
...

1、单元格数据操作,适用于filter解决不了的数据操作,下面是几种常用写法,也可以用 Table-column 的属性formatter 

注意:这几种写法本质上是一样的,都是vue的插槽,v-slot是2.6新增的,代替之前的slot和slot-scope

第一种写法,利用 slot-scope="scope"

 <el-table-column align="center"  label="Windows" min-width="105">
     <template slot-scope="scope">
         <span>{{ scope.row.put}} | {{ scope.row.clicke }}</span>
      </template>
 </el-table-column>

第二种写法,利用  v-slot="scope"

 <el-table-column align="center"  label="Windows" min-width="105">
     <template v-slot="scope">
         <span>{{ scope.row.put}} | {{ scope.row.clicke }}</span>
      </template>
 </el-table-column>

第三种写法,利用  v-slot="{ row }" 对scope进行解构

 <el-table-column align="center"  label="Windows" min-width="105">
     <template v-slot="{ row }">
         <span>{{ scope.row.put}} | {{ scope.row.clicke }}</span>
      </template>
 </el-table-column>

 

相关标签: elementUI 前端