【el-table】插槽使用：循环头部header和内容content写法

最新推荐文章于 2024-06-05 23:04:32 发布

前端小云儿

最新推荐文章于 2024-06-05 23:04:32 发布

阅读量1.1k

点赞数 1

分类专栏：前端静态页面以及逻辑文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/124891579

版权

前端静态页面以及逻辑专栏收录该内容

117 篇文章 17 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文详细介绍了如何在Element UI的el-table组件中使用插槽进行头部和内容的循环展示，主要涉及Vue.js的模板语法和JavaScript的逻辑处理。

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

循环头部

内容使用插槽写法

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="item in tableHeader"
        :key="item.index"
        :label="item.label"
        :prop="item.prop"
      >
        <template slot="header" slot-scope="scope">
          <div class="name-sort">
            <span>{
  { scope.column.label }}</span>
          </div>

了解本专栏