在vue3中使用饿了么ui中的表格实现自定义表头

在vue2中 使用用关键字slot="header" 
 <!-- 自定义表头 -->
<template slot="header" slot-scope="scope">
  <div class="top">
    <el-tooltip class="item" effect="dark" content="按数值从小到大排序,越小排靠前;相同数值按更新时间排序,最近更新排前" placement="top">
      <span>排序  <i class="el-icon-question" ></i></span>
    </el-tooltip>
  </div>
</template>
<!-- 当前列内容 -->
<template  slot-scope="scope">
  <span>{
    
    {
    
    scope.row.product_sort}}</span>
</template>

在vue3中使用自定义表头  #header
 <!-- 自定义表头 -->
    <template #header>
      <div class="top">
        <el-tooltip class="item" effect="dark" content="按数值从小到大排序,越小排靠前;相同数值按更新时间排序,最近更新排前" placement="top">
          <span>排序
            <el-icon :size="10"><QuestionFilled /></el-icon>
          </span>
        </el-tooltip>
      </div>
    </template>
    <!-- 当前列内容 -->
    <template  #default="scope">
      <span>{
    
    {
    
    scope.row.product_sort}}</span>
    </template>
  </el-table-column>
          

猜你喜欢

转载自blog.csdn.net/xiaokangna/article/details/132870123