Vue3.0使用Element-ui制作table组件，操作列动态渲染按钮

原创

已于 2024-02-18 17:34:40 修改 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-02-18 17:30:17 首次发布

大家好，我是一个8年前端开发经验的新博主（实战react方向较多），最近两年互联网行业动荡，工作不稳定，想积累点自己的项目实践经验以备不时之需。第一弹！分享一下最近使用vue3.0二次封装过的el-table组件，带有分页功能，以及操作列按动态数据有条件渲染！希望可以帮助各位在职前端小伙伴解决一些实际问题。

下一弹分享自定义搜索表单组件<SearchForm/>，喜欢的记得点个赞哦~

知识点：

1、二次封装el-table，减少重复写很多标签

2、table表格自带翻页页签pagination

3、序号列按当前页累加计算

4、操作列按数据有条件渲染

直接先看效果图：（前提先安装UI组件库：npm element-plus --save）

代码比较多，原因是我写的比较全，有经验的可以直接看关键的地方！！

首先，看二次封装过的Table组件代码

<!--
 * @Author: Cocoon_xu
 * @LastEditTime: 2024-02-18 16:41:12
 * @Description: 二次封装表格组件，带翻页控件
-->
<template>
    <!-- 表格 -->
    <el-table
        :data="tableData"
        :border="border"
        :stripe="stripe"
        v-loading="loading"
        style="width: 100%; overflow-x: auto;"
        @selection-change="selectionChange"
    >
      <!-- 复选框 -->
      <el-table-column v-if="isSelectabled" type="selection" width="50" />
      
      <template v-for="(column,index) in tableColunms" :key="index">
        <!-- 文字不需要特殊显示 -->
        <el-table-column
          :type="column.type"
          :prop="column.prop"
          :label="column.label"
          :fixed="column.fixed || true"
          :sortable="column.sortable || false"
          :show-overflow-tooltip="column.overHidden || false"
          :width="column.width"
          :min-width="column.minWidth || '50px'"
          :align="column.align || 'center'"
          :formatter="column.formatter"
        >
            <!-- <template #default="scope" >
                <span v-if="scope.column.type !=='index'">{
  
  { scope.row[column.prop] ? scope.row[column.prop] : "" }}</span>
                <span v-if="scope.column.type ==='index'">{
  
  { (pagination.pageNum-1) * pagination.pageSize + scope.$index