vue表格动态实现

Vue 表格动态实现方法

动态表格的实现通常涉及数据绑定、列配置动态化以及交互功能的灵活处理。以下是几种常见场景的具体实现方式：

动态数据绑定

通过v-for指令循环渲染表格行数据，数据变化时表格自动更新：

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

动态列配置

使用计算属性或外部配置文件动态生成表头：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' }
      ],
      data: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

第三方组件库实现

使用Element UI的el-table组件实现动态功能：

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

<script>
export default {
  data() {
    return {
      dynamicColumns: [
        { prop: 'date', label: '日期', width: '180' },
        { prop: 'address', label: '地址' }
      ],
      tableData: [
        { date: '2023-01-01', address: '上海' }
      ]
    }
  }
}
</script>

动态行列合并

通过span-method实现复杂合并：

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

<script>
export default {
  methods: {
    arraySpanMethod({ row, column, rowIndex, colIndex }) {
      if (rowIndex % 2 === 0 && colIndex === 0) {
        return [1, 2] // 合并两列
      }
      return [1, 1]
    }
  }
}
</script>

服务端动态加载

结合分页和异步请求实现动态加载：

<template>
  <el-table
    :data="tableData"
    @filter-change="handleFilter"
    @sort-change="handleSort">
    <!-- 列定义包含filter/sort属性 -->
  </el-table>
  <el-pagination @current-change="handlePageChange"/>
</template>

<script>
export default {
  methods: {
    async loadData(params) {
      const res = await api.getTableData(params)
      this.tableData = res.data
    },
    handlePageChange(page) {
      this.loadData({ page })
    }
  }
}
</script>

动态样式控制

根据数据状态设置行/列样式：

<template>
  <el-table :row-class-name="tableRowClassName">
    <!-- 列定义 -->
  </el-table>
</template>

<script>
export default {
  methods: {
    tableRowClassName({ row }) {
      return row.status === 'error' ? 'warning-row' : ''
    }
  }
}
</script>

<style>
.warning-row { background-color: #fff2f0; }
</style>

每种实现方式适用于不同场景，可根据项目需求选择基础HTML表格、UI组件库或完全自定义的实现方案。动态表格的核心在于将数据、配置与视图层解耦，通过响应式机制实现自动更新。