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

最新推荐文章于 2023-11-18 20:11:50 发布

小康娜

最新推荐文章于 2023-11-18 20:11:50 发布

阅读量276

点赞数

分类专栏： vue3学习工作中的学习工作文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/xiaokangna/article/details/132870123

版权

工作同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

工作中的学习

6 篇文章 0 订阅

订阅专栏

vue3学习

4 篇文章 0 订阅

订阅专栏

在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>