el-table 递归表头slot透传封装(优化版)

Kangchuijing

于 2024-01-28 10:01:56 发布

阅读量538

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/dizzysunshine/article/details/135892191

版权

本文介绍了如何优化一个使用Vue编写的表格组件，通过改进列的动态插槽和处理排序逻辑，使代码更简洁。作者参考了其他大佬的文章并分享了自己的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在开头：

之前写过一篇插槽透传文章，总觉得代码不够简洁，幸亏找到大佬文章，参考了下做了个优化版

文章链接

Table.vue

<template>
  <el-table :data="list">
    <Column v-for="column in columns" :key="column.prop" :column="column" :sortParams="sortParams" @sortChange="handleSortChange">
      <template v-for="slotItem in Object.keys($scopedSlots)" #[slotItem]="scope">
        <slot :name="slotItem" v-bind="scope"></slot>
      </template>
    </Column>
  </el-table>
</template>

<script lang="ts">
import Column from './Column.vue';

export default {
  props: {
    columns: {
      type: Array,
      default: () => [
        { prop: 'name', label: '姓名', sortable: true },
        { prop: 'age', label: '年龄', sortable: true },
        { prop: 'info', label: '个人信息', children: [
          { prop: 'parent'