Vue3 Element Plus el-table-column Sortable 排序失效

问题描述:

vue3中 element plus 中 el-table 的 el-table-column使用了插槽后,为什么sortable不起效果,不能点击排序

html 复制代码
          <el-table-column
            label="记账日期"
            width="110"
            fixed="left"
            header-align="left"
            sortable
            show-overflow-tooltip>
            <template #default="scope">
              {{ formatDate(scope.row.jzDatetime, "YYYY-MM-DD") }}
            </template>
          </el-table-column>

在 Element Plus 的 el-table 中,当 el-table-column 使用插槽自定义内容时,若未指定 prop 属性,会导致 sortable 排序功能失效。因为表格需要根据 prop 确定排序的字段。即使内容经过格式化,排序仍基于原始数据字段。

解决方案 :为 el-table-column 添加 prop 属性,指向对应的数据字段名:

vue

复制

下载

复制代码
<el-table-column
  prop="jzDatetime" <!-- 添加 prop 指定排序字段 -->
  label="记账日期"
  width="110"
  fixed="left"
  header-align="left"
  sortable
  show-overflow-tooltip
>
  <template #default="scope">
    {{ formatDate(scope.row.jzDatetime, "YYYY-MM-DD") }}
  </template>
</el-table-column>

注意事项:

  1. 数据类型正确性 :确保 jzDatetime 字段的值是适合排序的类型(如时间戳或 Date 对象)。若为字符串,需保证格式可直接比较(如 YYYY-MM-DD)。

  2. 自定义排序规则 :若需按格式化后的值排序(如字符串日期),可使用 sort-method 自定义排序逻辑:

    vue

    复制

    下载

    复制代码
    <el-table-column
      :sort-method="(a, b) => customSort(a.jzDatetime, b.jzDatetime)"
      <!-- 其他属性 -->
    >

    js

    复制

    下载

    复制代码
    const customSort = (a, b) => {
      // 实现自定义排序逻辑
      return new Date(a) - new Date(b);
    };

添加 prop 后,表格即可根据指定字段触发默认排序,点击表头即可正常排序。

html 复制代码
          <el-table-column
            prop="jzDatetime"
            label="记账日期"
            width="110"
            fixed="left"
            header-align="left"
            sortable
            show-overflow-tooltip>
            <template #default="scope">
              {{ formatDate(scope.row.jzDatetime, "YYYY-MM-DD") }}
            </template>
          </el-table-column>
相关推荐
只可远观21 分钟前
Flutter图片Image、本地图片、程程图片、圆片剪切、圆形图片
开发语言·javascript·flutter
charlee4432 分钟前
通过JS模板引擎实现动态模块组件(Vite+JS+Handlebars)
前端·javascript·vite·handlebars
小*-^-*九1 小时前
基础框架 兼容视频格式
前端·javascript·vue.js
小宁爱Python1 小时前
JavaScript if语句练习题解析:10道题提升你的逻辑判断能力
开发语言·javascript·ecmascript
工业互联网专业2 小时前
基于Android的个人健康管理系统APP
android·java·vue.js·spring boot·毕业设计·源码·课程设计
林恒smileZAZ2 小时前
优化用户体验:拦截浏览器前进后退、刷新、关闭、路由跳转等用户行为并弹窗提示
前端·javascript·ux
虾球xz3 小时前
游戏引擎学习第312天:跨实体手动排序
javascript·c++·学习·算法·游戏引擎
破晓之翼3 小时前
萤石云实际视频实时接入(生产环境)
前端·javascript·音视频
CodeCipher3 小时前
Vue3解决路由缓存问题
前端·javascript·vue.js
西哥写代码4 小时前
基于cornerstone3D的dicom影像浏览器 第二十三章 mpr预设窗值与vr preset
javascript·3d·vue3·dicom·cornerstonejs