element ui table 用render函数排序失效

如果你使用 Element UI 的 Table 组件和 render 函数来自定义表格列，但是排序功能失效了，有可能是因为你没有正确地使用 sortable 属性。你需要在 render 函数中的对应列中设置 sortable 属性为 true，例如：

{
  label: '姓名',
  prop: 'name',
  sortable: true,
  render: (h, { row }) => {
    return h('div', row.name)
  }
}

这样就可以启用该列的排序功能了。同时，你也需要在 Table 组件中开启排序功能，通过设置 :sort-enabled="true" 来实现。例如：

<el-table :data="tableData" :sort-enabled="true">
  <!-- 自定义表格列 -->
</el-table>

希望这个解答能够帮到你！

相关问题

element ui table 用render函数排序高亮样式不显示

你好，对于 Element UI Table 中使用 Render 函数排序时，高亮样式不显示的问题，可以尝试以下几个解决方法：

1. 在 Render 函数中给需要高亮的元素添加一个 class 名称，并在 CSS 样式中设置该 class 的样式即可实现高亮效果。

2. 在 Table 组件中设置 highlight-current-row 属性为 true，即可在当前行添加高亮样式。

3. 在 Render 函数中手动判断当前行是否为当前选中行，若是则添加高亮样式，例如：

render: (h, { row, column, index }) => {
  const className = index === this.currentIndex ? 'current-row' : '';
  return h('div', { class: className }, row[column.property]);
}

其中，this.currentIndex 为当前选中行的索引。

希望以上方法能够帮助到你。

element ui table 用render函数表头箭头排序样式未生效

如果在使用 Element UI Table 的 Render 函数进行表头箭头排序时，样式未生效，可以尝试以下方法：

1. 确认你已经引入了 Element UI 的样式文件，例如：

import 'element-ui/lib/theme-chalk/index.css';

2. 对于表头排序的箭头样式，需要使用 ::before 或 ::after 伪元素设置，例如：

.el-table__sort-icon.asc::before {
  content: '\e617';
}

.el-table__sort-icon.desc::before {
  content: '\e6b3';
}

其中，asc 和 desc 分别对应升序和降序排序。

3. 确认你在 Render 函数中正确设置了表头的排序参数，例如：

render: (h, { column, $index }) => {
  return h('span', [
    column.label,
    h('span', {
      class: 'el-table__sort-icon',
      on: {
        click: () => {
          this.handleSortClick(column, $index);
        }
      }
    })
  ]);
}

其中，handleSortClick 是一个处理表头排序点击事件的函数。在这个函数中，需要设置表格数据的排序规则。

希望这些方法能够帮助到你。