当前位置：首页 > VUE

vue实现复杂表格

2026-03-10 12:48:57VUE

Vue实现复杂表格的方法

使用Element UI或Ant Design Vue组件库

Element UI和Ant Design Vue提供了功能丰富的表格组件，支持排序、筛选、分页、固定列、合并单元格等复杂功能。

安装Element UI：

npm install element-ui

基础表格示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2023-01-01',
        name: '张三',
        address: '北京市'
      }]
    }
  }
}
</script>

实现可编辑表格

通过自定义表格列实现单元格编辑功能：

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名">
      <template slot-scope="scope">
        <el-input v-if="scope.row.edit" v-model="scope.row.name"></el-input>
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="toggleEdit(scope.row)">
          {{ scope.row.edit ? '保存' : '编辑' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    toggleEdit(row) {
      row.edit = !row.edit
      if (!row.edit) {
        // 保存逻辑
      }
    }
  }
}
</script>

实现虚拟滚动优化性能

对于大数据量表格，使用虚拟滚动提升性能：

<template>
  <el-table
    :data="tableData"
    height="500"
    row-key="id"
    :row-height="50"
    :virtual-scroll="true"
  >
    <!-- 列定义 -->
  </el-table>
</template>

实现表格合并单元格

通过span-method属性实现单元格合并：

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
  >
    <!-- 列定义 -->
  </el-table>
</template>

<script>
export default {
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2]
        }
      }
    }
  }
}
</script>

使用VxeTable高级表格组件

VxeTable提供了更强大的表格功能，适合复杂业务场景：

安装：

npm install xe-utils vxe-table

使用示例：

<template>
  <vxe-table
    border
    show-overflow
    :data="tableData"
    :edit-config="{ trigger: 'click', mode: 'cell' }"
  >
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="姓名" :edit-render="{}">
      <template #edit="{ row }">
        <input type="text" v-model="row.name">
      </template>
    </vxe-column>
  </vxe-table>
</template>

实现树形表格

展示层级数据结构：

<template>
  <el-table
    :data="tableData"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    row-key="id"
  >
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>

自定义表头渲染

通过插槽自定义表头内容：

<template>
  <el-table :data="tableData">
    <el-table-column label="操作">
      <template slot="header">
        <el-button type="primary" size="mini">新增</el-button>
      </template>
      <template slot-scope="scope">
        <el-button size="mini">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

实现拖拽排序

通过row-draggable属性启用行拖拽：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :row-draggable="true"
    @row-drop="handleDrop"
  >
    <!-- 列定义 -->
  </el-table>
</template>

<script>
export default {
  methods: {
    handleDrop(event) {
      const { moved } = event.detail
      // 处理拖拽后的数据排序
    }
  }
}
</script>

实现多级表头

通过嵌套el-table-column实现多级表头：

<template>
  <el-table :data="tableData">
    <el-table-column label="基本信息">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table-column>
    <el-table-column label="联系信息">
      <el-table-column prop="phone" label="电话"></el-table-column>
    </el-table-column>
  </el-table>
</template>

实现动态列

根据数据动态生成表格列：

vue实现复杂表格

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="col in columns"
      :key="col.prop"
      :prop="col.prop"
      :label="col.label"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' }
      ]
    }
  }
}
</script>