devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小小林熬夜学编程 | 2024-06-07 06:09:30

赞

踩

vue table组件

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

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

知识点：

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

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

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

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

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

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

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

  1. <!--
  2.  * @Author: Cocoon_xu
  3.  * @LastEditTime: 2024-02-18 16:41:12
  4.  * @Description: 二次封装表格组件，带翻页控件
  5. -->
  6. <template>
  7.     <!-- 表格 -->
  8.     <el-table
  9.         :data="tableData"
  10.         :border="border"
  11.         :stripe="stripe"
  12.         v-loading="loading"
  13.         style="width: 100%; overflow-x: auto;"
  14.         @selection-change="selectionChange"
  15.     >
  16.       <!-- 复选框 -->
  17.       <el-table-column v-if="isSelectabled" type="selection" width="50" />
  18.       
  19.       <template v-for="(column,index) in tableColunms" :key="index">
  20.         <!-- 文字不需要特殊显示 -->
  21.         <el-table-column
  22.           :type="column.type"
  23.           :prop="column.prop"
  24.           :label="column.label"
  25.           :fixed="column.fixed || true"
  26.           :sortable="column.sortable || false"
  27.           :show-overflow-tooltip="column.overHidden || false"
  28.           :width="column.width"
  29.           :min-width="column.minWidth || '50px'"
  30.           :align="column.align || 'center'"
  31.           :formatter="column.formatter"
  32.         >
  33.             <!-- <template #default="scope" >
  34.                 <span v-if="scope.column.type !=='index'">{{ scope.row[column.prop] ? scope.row[column.prop] : "" }}</span>
  35.                 <span v-if="scope.column.type ==='index'">{{ (pagination.pageNum-1) * pagination.pageSize + scope.$index + 1}}</span>
  36.             </template> -->
  37.         </el-table-column>
  38.       </template>
  39.  
  40.       <!-- 操作列插槽 -->
  41.       <el-table-column
  42.         label="操作"
  43.         fixed="right"
  44.         align="center"
  45.       >
  46.         <template #default="scope">
  47.             <!-- 当操作按钮少于3个，建议使用mode:'inline'，默认为'dropdown'模式 -->
  48.             <table-dropdown
  49.                 :actionColumns='()=>actionColumns(scope)'
  50.                 :scope="scope"
  51.                 :mode="actionMode || 'dropdown'"
  52.             />
  53.         </template>
  54.       </el-table-column>
  55.     </el-table>
  56.     
  57.     <!-- 分页 -->
  58.     <div class="pagination">
  59.         <el-pagination
  60.             v-model:page-size="pagination.pageSize"
  61.             v-model:current-page="pagination.pageNum"
  62.             :total="total"
  63.             :layout="layout"
  64.             :page-sizes="pageSizesArr"
  65.             @size-change="sizeChange"
  66.             @current-change="currentChange"
  67.         />
  68.     </div>
  69. </template>
  70.  
  71. <script setup>
  72. import { defineProps, defineEmits } from 'vue';
  73. import TableDropdown from '@/components/TableDropdown/dropdown.vue'
  74.  
  75. const emits = defineEmits(['sizeChange', 'currentChange'])
  76. const props = defineProps({
  77.     tableData:{
  78.         type: Array,
  79.         default:[]
  80.     },
  81.     tableColunms:{
  82.         type: Array,
  83.         default: []
  84.     },
  85.     actionColumns:{
  86.         type: Function,
  87.         default:() => {}
  88.     },
  89.     actionMode:{
  90.         type: String,
  91.         default: 'dropdown'
  92.     },
  93.     opColunms:{
  94.         type: Object,
  95.         default: {}
  96.     },
  97.     border:{ // 是否带有纵向边框
  98.         type: Boolean,
  99.         default: false
  100.     },
  101.     loading:{
  102.         type: Boolean,
  103.         default: false
  104.     },
  105.     isSelectabled: { // 是否带有复选框
  106.         type: Boolean,
  107.         default: false
  108.     },
  109.     pagination: {
  110.         type: Object,
  111.         default: () => {
  112.             return {pageSize: 10, pageNum: 1}
  113.         }
  114.     },
  115.     pageSizesArr:{
  116.         type: Array,
  117.         default: () => {
  118.             return [10,20,30,50]
  119.         }
  120.     },
  121.     stripe: { // 是否为斑马纹 table
  122.         type: Boolean,
  123.         default: false
  124.     },
  125.     total: {
  126.         type: Number,
  127.         required: true,
  128.         default: 0
  129.     },
  130.     layout:{
  131.         type: String,
  132.         default: "total, sizes, prev, pager, next, jumper"
  133.     }
  134. })
  135. // 触发选择框
  136. const selectionChange = (val) => {
  137.    console.log(val)
  138. }
  139. // 切换分页size
  140. const sizeChange = (val) => {
  141.     emits('sizeChange', val)
  142. }
  143. // 切换分页
  144. const currentChange = (val) => {
  145.     emits('currentChange', val)
  146. }
  147.  
  148. </script>
  149.  
  150. <style lang="scss">
  151. /* .el-table .warning-row {
  152.   --el-table-tr-bg-color: var(--el-color-warning-light-9);
  153. }
  154. .el-table .success-row {
  155.   --el-table-tr-bg-color: var(--el-color-success-light-9);
  156. } */
  157. .pagination{
  158.     margin: 15px auto;
  159.     display: flex;
  160.     justify-content: center;
  161. }
  162. .el-table{
  163.     .el-table__header .cell{
  164.       color: #000;
  165.     }
  166. }
  167. </style>

我们可以看到Table组件里调用了TableDropdown，也是我自定义的一个组件，用于表格的操作列按表格数据有条件渲染成不同的按钮。下面为此组件的代码：

  1. <!--
  2.  * @Author: Cocoon_xu
  3.  * @LastEditTime: 2024-02-18 16:38:25
  4.  * @Description: 表格操作列表
  5. -->
  6. <script setup>
  7. import { defineProps } from 'vue';
  8. const props = defineProps({
  9.     actionColumns:{
  10.       type: Function,
  11.       default: () => {}
  12.    },
  13.    scope: {
  14.       type: Object,
  15.       default: {}
  16.    },
  17.    mode: {
  18.       type: String,
  19.       default: 'dropdown'
  20.    }
  21. })
  22.  
  23. </script>
  24.  
  25. <template>
  26.     <template v-if="mode === 'inline'">
  27.         <el-button
  28.             v-for="(item,index) in actionColumns(scope)"
  29.             text
  30.             :key="index"
  31.             :icon="item.icon"
  32.             :disabled="item.disabled"
  33.             :style="{marginLeft:0, color: item.color}"
  34.             @click="(e)=>{
  35.                 e.preventDefault();
  36.                 let row = JSON.parse(JSON.stringify(scope.row))
  37.                 item.event(row);
  38.             }"
  39.         >
  40.             {{ item.label }}
  41.         </el-button> 
  42.     </template>
  43.     <template v-else>
  44.         <el-dropdown>
  45.             <span class="el-dropdown-link">
  46.                 <el-icon color="#409EFC"><Menu/></el-icon>
  47.             </span>
  48.             <template #dropdown>
  49.                 <el-dropdown-menu>
  50.                     <el-dropdown-item
  51.                         v-for="(item, index) in actionColumns(scope)"
  52.                         :key="index"
  53.                         :icon="item.icon"
  54.                         :disabled="item.disabled"
  55.                         @click="(e)=>{
  56.                             e.preventDefault();
  57.                             let row = JSON.parse(JSON.stringify(scope.row))
  58.                             item.event(row);
  59.                         }"
  60.                     >
  61.                        <span>{{ item.label }}</span>
  62.                     </el-dropdown-item>
  63.                 </el-dropdown-menu>
  64.             </template>
  65.         </el-dropdown>
  66.     </template>
  67. </template>
  68.  
  69. <style lang="scss">
  70. .table-menu{
  71.     background: transparent;
  72.     .el-menu-item{
  73.         padding: 0;
  74.         height: 24px;
  75.         line-height: 24px;
  76.     }
  77. }
  78. </style>

最后，就是调用组件的使用

  1. <!--
  2.  * @Author: Cocoon_xu
  3.  * @LastEditTime: 2024-02-18 16:38:25
  4.  * @Description: 组件调用
  5. -->
  6.  
  7. <template>
  8.     <div class="table-box">
  9.         <common-table
  10.             :loading="loading"
  11.             :tableColunms="tableColunms"
  12.             :actionColumns="actionColumns"
  13.             :tableData="tableData"
  14.             :pagination="pagination"
  15.             :total="total"
  16.             :stripe="true"
  17.             :isSelectabled="false"
  18.             @currentChange="handleCurrentChange"
  19.             @sizeChange="handleSizeChange"
  20.         ></common-table>
  21.     </div>
  22. </template>
  23.  
  24. <script setup>
  25. import { ref, onMounted, h } from 'vue';
  26. import CommonTable from '@/components/Table/index.vue';
  27.  
  28. const loading = ref(false)
  29. const tableData = ref([])
  30. const total = ref(0)
  31. const pagination = ref({
  32.     pageSize: 10,
  33.     pageNum: 1
  34. })
  35. const tableColunms = [
  36.     {
  37.         label:'序号',
  38.         width: 80,
  39.         formatter:(row, columm, cellValue, index) => {
  40.             return (pagination.value.pageNum-1) * pagination.value.pageSize + index + 1
  41.         }
  42.     },{
  43.         label:'标题',
  44.         prop:'title',
  45.         minWidth: 120,
  46.         overHidden: true
  47.     },{
  48.         label:'发布人',
  49.         prop:'sendByName',
  50.     },{
  51.         label:'审核状态',
  52.         prop:'submitStatus',
  53.         minWidth: 70,
  54.         formatter: (row, column, cellValue, index) => {
  55.             if(cellValue === '1'){
  56.                 return h('span',{class:'draft'},'草稿')
  57.             }else if(row.auditStatus === 'active'){
  58.                 return h('span',{class:'waitExamine'},'待审核')
  59.             }else if(row.auditStatus === 'completed'){
  60.                 return h('span',{class:'pass'},'已通过')
  61.             }else if(row.auditStatus === 'terminated'){
  62.                 return h('span',{class:'error'},'审批终止')
  63.             }else if(row.auditStatus === 'rejected'){
  64.                 return h('span',{class:'error'},'被退回')
  65.             }else{
  66.                 return '--'
  67.             }
  68.         }
  69.     }
  70. ]
  71. // 操作列按钮
  72. const actionColumns = (scope) =>{
  73.     let btns = [{
  74.         label:'查看',
  75.         type:'check',
  76.         icon:'View',
  77.         color:'#409EFC',
  78.         disabled: false,
  79.         event:(row) => {
  80.             console.log(row)
  81.             detail(row)
  82.         }
  83.     }];
  84.     if(scope.row.auditStatus == 1 || (scope.row.auditStatus == 'rejected')){
  85.       btns.push({
  86.         label:'编辑',
  87.         type:'edit',
  88.         icon:'Edit',
  89.         color:'#409EFC',
  90.         disabled: false,
  91.         event:(row) => {
  92.             console.log(row)
  93.         }
  94.       })
  95.     }
  96.     if((scope.row.sendStatus == 0 && scope.row.auditStatus != 'completed'))){
  97.       btns.push({
  98.         label:'删除',
  99.         type:'delete',
  100.         icon:'Delete',
  101.         color:'#409EFC',
  102.         disabled: false,
  103.         event:(row) => {
  104.             console.log(row)
  105.         }
  106.       })
  107.     }
  108.     return btns;
  109. }
  110.  
  111. // 切换当前分页
  112. const handleCurrentChange = (val) => {
  113.     pagination.value = {
  114.         pageNum: val,
  115.         pageSize: pagination.value.pageSize
  116.     }
  117.     getConListInfoPagefn();
  118. }
  119. // 切换分页size
  120. const handleSizeChange = (val) => {
  121.     pagination.value = {
  122.         pageNum: 1,
  123.         pageSize: val
  124.     }
  125.     getConListInfoPagefn();
  126. }
  127.  
  128.  
  129. </script>

代码部分结束！希望对你有所帮助！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/684246
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号