【elementui动态设置el-table表头并添加插槽】

最新推荐文章于 2025-04-15 17:07:08 发布

小香菜籽

最新推荐文章于 2025-04-15 17:07:08 发布

阅读量2k

点赞数

分类专栏： vue项目中的问题（一）文章标签： elementui javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46858417/article/details/131073968

版权

vue项目中的问题（一）专栏收录该内容

26 篇文章

订阅专栏

该文章展示了如何在ElementUI中动态设置el-table组件的表头，并添加自定义插槽进行数据格式化。通过使用v-for循环遍历表头数据，动态生成table-column，并结合slot-scope进行条件渲染，实现不同列显示不同的内容，如使用el-tag展示不同类型的信息。

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

elementui动态设置el-table表头并添加插槽

实现效果

在这里插入图片描述

elementui动态设置el-table表头

 <el-table
      size="small"
      :data="listData"   //绑定表内数据
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      @row-dblclick="handleEdit"
    >
      <el-table-column align="center" fixed="left" type="selection" width="60">
      </el-table-column>  //勾选框
      <div>
        <el-table-column prop="number" label="序号" width="70">
          <template slot-scope="scope">
            <div>{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>  //序号
      </div>
      <div v-for="(item, index) in table_head" :key="index">  //遍历出表头的值
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :width="item.width"
          align="center"
        ></el-table-column>
      </div>
    </el-table>

数据格式

在这里插入图片描述

  this.listData = res.data.data[0].data;
  this.table_head = res.data.data[1].header;

添加插槽

 <div v-for="(item, index) in table_head" :key="index">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :width="item.width"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="item.prop == 'messageSystemType'" type="primary">
              <el-tag
                type="primary"
                v-if="scope.row.messageSystemType == 'base'"
              >
                {{ "人事档案" }}
              </el-tag>
              <el-tag
                type="success"
                v-if="scope.row.messageSystemType == 'check'"
              >
                {{ "排班管理" }}
              </el-tag>
            </div>
            <div v-else-if="item.prop == 'messageType'">
              <el-tag type="primary" v-if="scope.row.messageType == '1'"
                >{{ "待办" }}
              </el-tag>
              <el-tag type="success" v-else-if="scope.row.messageType == '2'"
                >{{ "通过" }}
              </el-tag>
              <el-tag type="danger" v-else>{{ "拒绝" }}</el-tag>
            </div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
      </div>