Vue3 简单二次封装vxe-table

最新推荐文章于 2025-06-26 16:32:05 发布

原创最新推荐文章于 2025-06-26 16:32:05 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何使用VXE-Table组件创建HTML表格，通过`v-for`和`v-if/v-else`实现列的动态配置，同时支持自定义列内容，特别适合处理后台多表格项目的高效开发。

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

使用背景：使用table更加标准和简洁，同时兼顾自定义需求

HTML区域


  <vxe-table ...props.config>
    <vxe-column fixed="left" type="seq" align="center" title="序号" width="60" v-if="!props.isSeqConfig" />
    <vxe-column fixed="left" align="center" title="序号" width="60" v-else>
      <template v-slot="{ rowIndex, row }">
        <div class="flex items-center justify-center">
          <span class="mr-1">{{ rowIndex + 1 }}</span>
          <span :class="dynamicClass(row)">•</span>
        </div>
      </template>
    </vxe-column>
    <vxe-column v-for="e in props.TableBody" :fixed="e.fixed" :field="e.field" :title="e.title" :min-width="e.minWidth" :width="e.width" :align="e.align">
      <template v-slot="{ row }" v-if="e.custom">
        <slot :name="e.field" :row="row"></slot>
      </template>
    </vxe-column>
    <slot name="operate"> </slot>
  </vxe-table>

TS区域

interface TableItemType { //表格列的数据格式
  field: string
  title: string
  width?: number
  minWidth?: number
  fixed?: 'right' | 'left'
  custom?: boolean
  align?: 'left' | 'center' | 'right'
}

interface Props {
  TableBody: TableItemType[]
  TableData: any
  Config:any
}

const props = defineProps<Props>()

使用场景

<MyTable :TableBody="TableColumns" :TableData="TableData" height="100%">
    <template v-slot:name="{ row }">
        //个性区域
    </template>
    <template v-slot:operate>
          <vxe-column title="操作" width="100" align="center" fixed="right">
              <template v-slot="{ row }">
                //操作区域
              </template>
          </vxe-column>
    </template>
</MyTable>

具体数据格式

const TableColumns= [
    {
        field: 'name',
        title: '文件名',
        custom: true, //该列存在自己的需求，例如样式或者事件
    },  
    {
        field: 'ordStateStr',
        title: '状态',
        width: 80,
    },
    {
        field: 'doDate',
        title: '上传时间',
        width: 150,
    },
]

经过这么一封装，对于后台多表格项目，非常便利