el-table组件动态创建列并填充值+自定义表头+自定义列模板+过滤

最新推荐文章于 2024-08-08 14:22:16 发布

郭宝

最新推荐文章于 2024-08-08 14:22:16 发布

阅读量2.4k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_35366269/article/details/101350298

版权

Web前端专栏收录该内容

276 篇文章 105 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了如何使用Vue.js的el-table组件动态生成表格列，并结合自定义表头、列模板和过滤功能进行展示。通过核心代码示例，展示了在实际应用中如何实现这一功能。

摘要由CSDN通过智能技术生成

核心代码：

<template>
  <el-table
    v-loading="loadingDadaInfo"
    :data="dataInfos"
    style="width: 100%"
    stripe
    border
    height="300"
  >
    <!-- 动态创建列
                      :prop="columnsName"
          :label="columnsName | stringLength7Filter"
        -->
    <el-table-column
      v-for="(columnsName,index) in columnsNames"
      :key="index"
      align="center"
    >
      <!-- 自定义表头 -->
      <template slot="header">
        <span :title="columnsName">{
  { columnsName | stringLength10Filter }}</span>
      </template>
      <!-- 动态匹配列对应的值并

了解本专栏