elementui提取table表格封装组件，elementui提取table表格单列展示按钮的展示效果

最新推荐文章于 2025-07-05 12:01:56 发布

管火火火

最新推荐文章于 2025-07-05 12:01:56 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发前端开发问题记录文章标签： vue elementUI 封装组件提取组件前端

本文链接：https://blog.youkuaiyun.com/weixin_38373875/article/details/94752800

本文介绍如何在Vue项目中利用ElementUI封装表格组件，重点讲解了如何处理JSON数据中的时间戳转换和状态字段，并展示了如何在表格中添加单列按钮，同时提供了展示和隐藏按钮的实现方式。

后台管理系统中用到了非常多的表格，一般为了方便都会讲表格进行提取，形成公共组件。
提取表格时会遇到返回的json数据中要对单个字段进行处理，如时间戳转换，状态转换等
以及elementUI表格提取后每个页面都展示或者不展示当列按钮的方法

封装的表格组件代码

<template>
  <div>
    <!-- 中部列表表格 -->
    <el-table
      :data="tableData"
      highlight-current-row
      border
      @selection-change="handleSelectionChange"
      @current-change="handtable"
    >
      <el-table-column type="selection" width="50" align="center" v-if="gg?true:false"></el-table-column>
      <el-table-column label="序号" type="index" width="50" align="center" :index="indexMethod"></el-table-column>
      <el-table-column
        v-for="(itemtest, index) in title"
        :key="index"
        v-if="!itemtest.operate"
        :prop="itemtest.prop"
        align="center"
        :label="itemtest.label"
        :formatter="itemtest.formatter"
      ></el-table-column>
      <el-table-column v-else :label="itemtest.label" :prop=