devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【通用表格组件】vue3 + element-ui + tsx 实现通用表格组件_tsx elementui

作者：花生_TL007 | 2024-06-07 06:13:16

赞

踩

tsx elementui

介绍： 这是基于 vue3 + el-table 封装的通用表格组件 的 tsx写法，想要参考模板写法的可以到我另一篇博客喔~

【通用表格组件】vue3 + element-ui + template 实现通用表格组件

话不多说，本组件分为以下四部分，并且在同一层级:

1、CommonTable.module.scss 文件为组件样式文件

  1. :global {
  2.   .common-table {
  3.  
  4.     .el-table__header,
  5.     .el-table__body {
  6.       margin: 0;
  7.     }
  8.  
  9.     .el-table::before {
  10.       height: 0;
  11.     }
  12.  
  13.     .el-button {
  14.       padding: 0;
  15.       border: none;
  16.       margin: 0 4px;
  17.       padding: 0 4px 0 8px;
  18.       border-left: 1px solid #e2e2e2;
  19.       font-size: 14px;
  20.       min-height: 14px;
  21.  
  22.       &:first-child {
  23.         border-left: none;
  24.       }
  25.     }
  26.  
  27.     .el-button+.el-button {
  28.       margin-left: 0;
  29.     }
  30.  
  31.     .btn-right div {
  32.       margin-right: 5px;
  33.     }
  34.  
  35.     .btn-right div:empty {
  36.       margin-right: 0px;
  37.     }
  38.  
  39.     //斑马纹表格背景色
  40.     .el-table .even-row {
  41.       --el-table-tr-background-color: #f5fafb;
  42.     }
  43.  
  44.     .el-table .odd-row {
  45.       --el-table-tr-background-color: #ffffff;
  46.     }
  47.  
  48.     .el-table--border::after,
  49.     .el-table--group::after {
  50.       width: 0;
  51.     }
  52.  
  53.     .el-table__fixed-right::before,
  54.     .el-table__fixed::before {
  55.       background-color: transparent;
  56.     }
  57.  
  58.     .custom-table-header {
  59.       th {
  60.         background-color: #fff4d9 !important;
  61.       }
  62.     }
  63.  
  64.     .progress-line {
  65.       .el-progress-bar__outer {
  66.         height: 16px !important;
  67.       }
  68.  
  69.       .el-progress-bar__outer,
  70.       .el-progress-bar__inner {
  71.         border-radius: 0 !important;
  72.       }
  73.     }
  74.  
  75.     .text-no-wrap {
  76.       cursor: pointer;
  77.       display: inline;
  78.     }
  79.  
  80.     .el-table {
  81.  
  82.       td.el-table__cell div,
  83.       th.el-table__cell>.cell {
  84.         font-size: 14px;
  85.       }
  86.  
  87.       th.el-table__cell>.cell {
  88.         font-weight: normal;
  89.       }
  90.  
  91.       .cell {
  92.         padding: 0 10px;
  93.         line-height: 39px;
  94.       }
  95.  
  96.       .el-table__header-wrapper .checkBoxRadio .el-checkbox {
  97.         display: none;
  98.       }
  99.  
  100.       .el-checkbox {
  101.         display: flex;
  102.         align-items: center;
  103.         justify-content: center;
  104.       }
  105.  
  106.       .table-img {
  107.         width: 60px;
  108.         height: 60px;
  109.         object-fit: cover;
  110.         padding: 6px 0;
  111.         display: flex;
  112.         align-items: center;
  113.         margin: 0 auto;
  114.         justify-content: center;
  115.       }
  116.     }
  117.  
  118.     .el-table--small .el-table__cell {
  119.       padding: 0;
  120.     }
  121.  
  122.     .el-dropdown-menu__item {
  123.       padding: 5px 10px !important;
  124.  
  125.       .el-button {
  126.         width: 100%;
  127.         text-align: center;
  128.         padding: 0 8px;
  129.         margin: 0;
  130.       }
  131.     }
  132.  
  133.     .flex-box {
  134.       display: flex;
  135.       flex-flow: row nowrap;
  136.       justify-content: flex-start;
  137.  
  138.       .item {
  139.         margin: 0 10px;
  140.       }
  141.     }
  142.   }
  143.     .el-table{
  144.       .el-table__expand-icon{
  145.         .el-icon-arrow-right{
  146.           display: none;
  147.         }
  148.       }
  149.     }
  150. }

2、CommonTable.module.ts为组件逻辑文件

  1. import {
  2.   ref,
  3.   watch,
  4.   nextTick
  5. } from 'vue';
  6.  
  7. export default function(props, emit, commonTable) {
  8.   const curPageCheck = ref([])
  9.   const selectId = ref()
  10.  
  11.   watch(() => props.selectRadioId, () => {
  12.     selectId.value = props.selectRadioId
  13.   }, { immediate: true })
  14.  
  15.   watch(() => props.data, () => {
  16.     if (props.showCheckBox || props.turnRadio) {
  17.       nextTick(() => {
  18.         commonTable.value.clearSelection()
  19.         curPageCheck.value = []
  20.         if (props.showCheckBox && props.turnRadio) {
  21.           props.data.filter((item) => {
  22.             if (item.id === props.selectedIdArr[0]) {
  23.               commonTable.value.toggleRowSelection(item, true)
  24.             }
  25.           })
  26.         } else if (props.showCheckBox) {
  27.           props.data.filter((item) => {
  28.             if (props.selectedIdArr.includes(item.id)) {
  29.               commonTable.value.toggleRowSelection(item, true)
  30.               curPageCheck.value.push(item.id)
  31.             }
  32.           })
  33.         }
  34.       })
  35.     }
  36.   }, {
  37.     immediate: true
  38.   })
  39.   watch(() => props.selectedIdArr, (val) => {
  40.     if (props.showCheckBox || props.turnRadio) {
  41.       nextTick(() => {
  42.         commonTable.value.clearSelection()
  43.         curPageCheck.value = []
  44.         if (props.showCheckBox && props.turnRadio) {
  45.           props.data.filter((item) => {
  46.             if (item.id === val[0]) {
  47.               commonTable.value.toggleRowSelection(item, true)
  48.             }
  49.           })
  50.         } else if (props.showCheckBox) {
  51.           props.data.filter((item) => {
  52.             if (val.includes(item.id)) {
  53.               commonTable.value.toggleRowSelection(item, true)
  54.               curPageCheck.value.push(item.id)
  55.             }
  56.           })
  57.         }
  58.       })
  59.     }
  60.   }, {
  61.     immediate: true
  62.   })
  63.   const methods = {
  64.     /**
  65.      * prop 单值 或者 数组过滤(此处为针对时间组，不作为通用处理)
  66.      */
  67.     propFilter(prop, row) {
  68.       const res = prop.reduce((total, cur) => {
  69.         if (row[cur]) {
  70.           return (total += row[cur] + '~')
  71.         } else {
  72.           return ''
  73.         }
  74.       }, '')
  75.       return res ? res.replace(/~$/, '') : ''
  76.     },
  77.     handleTableButton(row, type) {
  78.       emit('operation', row, type);
  79.     },
  80.     /**
  81.      * 后续扩展位
  82.      * @param {*} methods
  83.      * @param {*} row
  84.      */
  85.     handleClickon(methods, row) {
  86.       emit(methods, { methods, row })
  87.     },
  88.     handleSelectionChange(val) {
  89.       if (props.showCheckBox && props.turnRadio) {
  90.         // 选择项大于1时
  91.         if (val.length > 1) {
  92.           const del_row = val.shift()
  93.           commonTable.value.toggleRowSelection(del_row, false)
  94.         }
  95.       }
  96.       // 全选
  97.       if (props.showCheckBox && props.selectedIdArr) {
  98.         if (props.turnRadio) {
  99.           emit('handle-selection-change', val)
  100.         } else {
  101.           // 一般复选框都是走到这一步
  102.           emit('handle-selection-change', val)
  103.         }
  104.       } else {
  105.         emit('handle-selection-change', val)
  106.       }
  107.     },
  108.     getRowKeys(row) {
  109.       return row.id
  110.     },
  111.     selectAll(val) {
  112.       if (props.showCheckBox && props.turnRadio) {
  113.         // 选择项大于1时
  114.         if (val.length > 1) {
  115.           val.length = 1
  116.         }
  117.       }
  118.       emit('handle-selection-change', val)
  119.     },
  120.     // 斑马纹表格背景色
  121.     tabRowClassName({ rowIndex }) {
  122.       const index = rowIndex + 1
  123.       if (index % 2 === 0) {
  124.         return 'even-row'
  125.       } else {
  126.         return 'odd-row'
  127.       }
  128.     },
  129.     cellClassName({ row, columnIndex }) {
  130.       if (row.confirmTag === 2 && columnIndex < props.tableLabel.length) {
  131.         return 'height_light_cell'
  132.       } else {
  133.         return ''
  134.       }
  135.     },
  136.     buttonDisabled(item, row) {
  137.       if (typeof item.disabled === 'function') return item.disabled(row) || false
  138.       if (!item.disabled) return item.disabled
  139.     },
  140.     /**
  141.      * 单选框选中事件
  142.      */
  143.     rowClick(row) {
  144.       if (row) {
  145.         selectId.value = row.id;
  146.         emit('rowClick', row)
  147.       }
  148.     }
  149.   };
  150.   return {
  151.     selectId,
  152.     methods
  153.   }
  154. }

3、CommonTable.tsx为组件渲染文件

  1. import {
  2.   defineComponent,
  3.   ref,
  4.   PropType
  5. } from 'vue';
  6. import {
  7.   OptionLabel,
  8.   TableLabel
  9. } from './types';
  10. import useModule from './commonTable.module';
  11. import './commonTable.module.scss';
  12.  
  13. export default defineComponent({
  14.   name: 'CommonTable',
  15.   props: {
  16.     /**
  17.      * 表格最高高度
  18.      */
  19.     maxHeight: {
  20.       type: [String, Number],
  21.       default: ''
  22.     },
  23.     /**
  24.      * 表格自定义属性展示
  25.      */
  26.     tableLabel: {
  27.       type: Array as PropType<TableLabel[]>,
  28.       default: () => []
  29.     },
  30.     /**
  31.      * 表格数据源
  32.      */
  33.     data: {
  34.       type: Array,
  35.       default: () => []
  36.     },
  37.     /**
  38.      * 配置需要显示的操作菜单
  39.      */
  40.     option: {
  41.       type: Object as PropType<OptionLabel>,
  42.       default: () => {}
  43.     },
  44.     showCheckBox: {
  45.       // 配置是否显示全选（复选框）
  46.       type: Boolean,
  47.       default: false
  48.     },
  49.     /** 是否复选框禁用 */
  50.     isEnable: {
  51.       type: Boolean,
  52.       default: false
  53.     },
  54.     /** 是否复选框禁用的方法 */
  55.     enableCheckBox: {
  56.       type: Function as PropType<(row: any) => boolean>,
  57.       default: null
  58.     },
  59.     /**
  60.      * 是否显示索引
  61.      */
  62.     showIndex: {
  63.       type: Boolean,
  64.       default: false
  65.     },
  66.     turnRadio: {
  67.       type: Boolean,
  68.       default: false
  69.     },
  70.     selectedIdArr: {
  71.       type: Array as PropType<number[] | string[]>,
  72.       default: () => []
  73.     },
  74.     /**
  75.      * 是否 隐藏文字过长
  76.      */
  77.     overflowText: {
  78.       type: Boolean,
  79.       default: false
  80.     },
  81.     /**
  82.      * 加载提示
  83.      */
  84.     loading: {
  85.       type: Boolean,
  86.       default: false
  87.     },
  88.     /**
  89.      * 是否保持之前复选框的数据
  90.      */
  91.     keep: {
  92.       type: Boolean,
  93.       default: false
  94.     },
  95.     /**
  96.      * 动态绑定 key 值
  97.      */
  98.     keyId: {
  99.       type: String,
  100.       default: 'id'
  101.     },
  102.     /**
  103.      * 行内自定义样式配置
  104.      */
  105.     rowStyle: {
  106.       type: Object,
  107.       default: () => {
  108.         return {
  109.           height: '40px'
  110.         }
  111.       }
  112.     },
  113.     /**
  114.      * 是否展示展开按钮
  115.      */
  116.     showExpand: {
  117.       type: Boolean,
  118.       default: false
  119.     },
  120.     /**
  121.      * 单选模式
  122.      */
  123.     showRadio: {
  124.       type: Boolean,
  125.       default: false
  126.     },
  127.     selectRadioId: {
  128.       type: String,
  129.       default: ''
  130.     }
  131.   },
  132.   setup(props, { emit, slots }) {
  133.     const commonTable = ref(null)
  134.     const {
  135.       selectId,
  136.       methods
  137.     } = useModule(props, emit, commonTable)
  138.     return () => (
  139.       <div v-loading={props.loading}>
  140.         <el-table
  141.           class='common-table'
  142.           ref={commonTable}
  143.           data={props.data}
  144.           border
  145.           highlight-current-row={props.showRadio}
  146.           max-height={props.maxHeight}
  147.           row-class-name={methods.tabRowClassName}
  148.           row-style={props.rowStyle}
  149.           cell-class-name={methods.cellClassName}
  150.           header-row-class-name='custom-table-header'
  151.           row-key={props.keyId}
  152.           on-select={methods.handleSelectionChange}
  153.           on-select-all={methods.handleSelectionChange}
  154.           on-current-change={methods.rowClick}
  155.         >
  156.           {
  157.             props.showRadio && <el-table-column
  158.               label='选择'
  159.               align='center'
  160.               width='55'
  161.               scopedSlots={{
  162.                 default: scope => (
  163.                   <el-radio
  164.                     label={scope.row.url}
  165.                     vModel={selectId.value}
  166.                     onChange={() => methods.rowClick(scope.row)}
  167.                   >
  168.                     &nbsp;
  169.                   </el-radio>
  170.                 )
  171.               }}
  172.             />
  173.           }
  174.           { props.isEnable ? (props.showCheckBox && <el-table-column
  175.               key='showCheckBox'
  176.               width='55'
  177.               type='selection'
  178.               reserve-selection={props.keep}
  179.               selectable={props.enableCheckBox}
  180.               class-name={props.turnRadio ? 'checkBoxRadio' : ''}
  181.               align='center'
  182.             />) : (props.showCheckBox && <el-table-column
  183.             key='showCheckBox'
  184.             width='55'
  185.             type='selection'
  186.             reserve-selection={props.keep}
  187.             class-name={props.turnRadio ? 'checkBoxRadio' : ''}
  188.             align='center'
  189.           />)
  190.           }
  191.           {
  192.             props.showExpand && <el-table-column
  193.               key='showExpand'
  194.               type='expand'
  195.               scopedSlots={{
  196.                 default: scope => {
  197.                   return <fragment row={scope.row}>
  198.                     {
  199.                       slots.expand?.()
  200.                     }
  201.                   </fragment>
  202.                 }
  203.               }}
  204.             >
  205.             </el-table-column>
  206.           }
  207.           {
  208.             props.showIndex && <el-table-column
  209.               align='center'
  210.               label='序号'
  211.               width='50'
  212.               scopedSlots={{
  213.                 default: scope => {
  214.                   return scope.$index + 1
  215.                 }
  216.               }}
  217.             >
  218.             </el-table-column>
  219.           }
  220.           {
  221.             props.tableLabel.map((item: TableLabel) => {
  222.               return <el-table-column
  223.                 key={item[props.keyId]}
  224.                 width={item.width ?? ''}
  225.                 align={item.align ?? 'center'}
  226.                 label={item.label}
  227.                 show-overflow-tooltip={props.overflowText}
  228.                 fixed={item.fixed}
  229.                 prop={item.prop}
  230.                 scopedSlots={{
  231.                   default: (scope) => {
  232.                     if (item.render) {
  233.                       return <div
  234.                         style='cursor: pointer'
  235.                         onClick={() => item.methods && methods.handleClickon(item.methods, scope.row)}
  236.                         domPropsInnerHTML={item.render(scope.row)}
  237.                       >
  238.                       </div>
  239.                     } else {
  240.                       return <div
  241.                         class='text-no-wrap'
  242.                         onClick={() => item.methods && methods.handleClickon(item.methods, scope.row)}>
  243.                         {
  244.                           Object.prototype.toString.call(item.prop) === '[object Array]' ? methods.propFilter(item.prop, scope.row) : (scope.row[item.prop] ?? '--')
  245.                         }
  246.                     </div>
  247.                     }
  248.                   }
  249.                 }}
  250.               >
  251.               </el-table-column>
  252.             })
  253.           }
  254.           {
  255.             props.option && <el-table-column
  256.               width={props.option.width}
  257.               label={props.option.label}
  258.               fixed={props.option.fixed}
  259.               align={props.option.align ?? 'center'}
  260.               scopedSlots={{
  261.                 default: scope => {
  262.                   return props.option.children.length && <div
  263.                     class='flex-box'
  264.                   >
  265.                     {
  266.                       props.option.children.map(item => {
  267.                         return (typeof item.hidden === 'function' ? !item.hidden(scope.row) : !item.hidden) && (
  268.                           <el-tooltip
  269.                             class='item'
  270.                             effect='light'
  271.                             popper-class='common-tooltip-primary'
  272.                             content={typeof item.label === 'function' ? item.label(scope.row) : item.label}
  273.                             placement='top'
  274.                           >
  275.                             <i
  276.                               class={['common-tooltip-icon', typeof item.icon === 'function' ? item.icon(scope.row) : item.icon]}
  277.                               plain='true'
  278.                               v-permission={item.permission ?? ''}
  279.                               onClick={() => methods.handleTableButton(scope.row, item.methods)}
  280.                             />
  281.                           </el-tooltip>
  282.                         )
  283.                       })
  284.                     }
  285.                   </div>
  286.                 }
  287.               }}
  288.               >
  289.             </el-table-column>
  290.           }
  291.         </el-table>
  292.       </div>
  293.     )
  294.   }
  295. })

4、types.ts为类型定义文件

  1. /** 表格基础类型配置  */
  2. interface BasicLabel {
  3.   label: string; // 标题
  4.   width?: number | string; // 宽度
  5.   fixed?: string; // 固定位置
  6.   align?: string; // 行排列
  7. }
  8.  
  9. /** 表格顶部类型配置  */
  10. export interface TableLabel extends BasicLabel {
  11.   prop: string;
  12.   methods?: string;
  13.   render?: render;
  14. }
  15.  
  16. /** 表格顶部自定义函数类型 */
  17. interface render {
  18.   (row: any): string | any
  19. }
  20.  
  21. /** 表格操作栏类型 */
  22. export interface OptionLabel extends BasicLabel {
  23.   children: OptionChild[]
  24. }
  25.  
  26. /** 表格操作栏子选项类型 */
  27. export interface OptionChild {
  28.   label: string | ((row: any) => string); // 标题
  29.   icon: string | ((row: any) => string); // icon图标
  30.   methods: string; // 执行方法
  31.   permission?: string | string[] | object; // 权限
  32.   hidden?: boolean | ((row: any) => boolean);
  33. }

5、组件调用方式 

组件调用：

  1.         <CommonTable
  2.               show-index
  3.               show-check-box={true}
  4.               loading={loading.value}
  5.               max-height={550}
  6.               table-label={tableHeaderData}
  7.               data={tableData.value}
  8.               option={tableOptionsData}
  9.               on-operation={methods.operationHandler}
  10.               on-handle-selection-change={methods.handleSelectionChange}
  11.             />

 属性及方法使用说明：

注意：如果你在使用Sortable插件想要拖动排序表格时，tableOptionsData 下的fixed参数请不要写，不然会导致无法拖动！

  1. /** 表格头部配置  */
  2. const tableHeaderData = [
  3.   {
  4.     label: '文件大小',
  5.     prop: 'size',
  6.     width: '100',
  7.     methods: 'fileEntry'
  8.     render(row: TableDataItem) {
  9.       return `<span>${row.size}</span>`
  10.     }
  11.   }
  12. ]
  13.  
  14. /** 表格操作栏配置  */
  15. const tableOptionsData = {
  16.   label: '操作',
  17.   width: '150',
  18.   fixed: 'right',
  19.   children: [
  20.     {
  21.       hidden: false || (row: TableDataItem) { // 可为boolean 或者 函数
  22.         return !row.status
  23.       },
  24.       label: '操作记录',
  25.       icon: 'xxx',
  26.       methods: 'record',
  27.       permission: ''
  28.     }
  29.   ]
  30. }
  31.  
  32. const methods = {
  33.     /**
  34.      * 操作栏分发逻辑
  35.      * @param row 当行数据
  36.      * @param type 分发函数名
  37.      */
  38.     operationHandler(row: TableDataItem, type: string) {
  39.       if (type === 'record') { // 操作记录
  40.       }
  41.     },
  42.     /**
  43.      * 复选框处理回调
  44.      * @param val 复选框选中的数据
  45.      */
  46.     handleSelectionChange(val: TableDataItem[]) {
  47.       multipleSelection.value = val
  48.     }
  49. }

---觉得好用且实用的，那就点赞收藏吧---

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

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

  

闽ICP备14008679号