当前位置：首页 > VUE

vue elementui实现动态表格

2026-02-21 21:05:29VUE

实现动态表格的基本思路

使用Vue和ElementUI实现动态表格的核心在于动态绑定表格数据和列配置。ElementUI的el-table组件支持通过v-for动态渲染列，并通过data属性绑定表格数据。

动态表格数据绑定

定义表格数据为一个数组，通常从后端API获取或本地模拟。数据格式需与列配置匹配：

vue elementui实现动态表格

data() {
  return {
    tableData: [
      { name: '张三', age: 25, address: '北京' },
      { name: '李四', age: 30, address: '上海' }
    ]
  }
}

动态列配置

通过v-for动态渲染el-table-column，列配置可存储在数组中：

data() {
  return {
    columns: [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      { prop: 'address', label: '地址' }
    ]
  }
}

模板结构

在模板中使用el-table和动态列渲染：

vue elementui实现动态表格

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

支持动态增删列

通过方法修改columns数组可实现动态增删列：

methods: {
  addColumn() {
    this.columns.push({ prop: 'newColumn', label: '新列' });
  },
  removeColumn(index) {
    this.columns.splice(index, 1);
  }
}

自定义列内容

使用插槽自定义列内容，支持更复杂的渲染逻辑：

<el-table-column v-for="col in columns" :key="col.prop" :label="col.label">
  <template #default="{ row }">
    {{ col.formatter ? col.formatter(row) : row[col.prop] }}
  </template>
</el-table-column>

完整示例代码

<template>
  <div>
    <el-button @click="addColumn">添加列</el-button>
    <el-table :data="tableData" border>
      <el-table-column 
        v-for="(col, index) in columns" 
        :key="col.prop"
        :prop="col.prop" 
        :label="col.label">
        <template #default="{ row }">
          {{ col.formatter ? col.formatter(row) : row[col.prop] }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ $index }">
          <el-button @click="removeRow($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京' },
        { name: '李四', age: 30, address: '上海' }
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄', formatter: row => `${row.age}岁` },
        { prop: 'address', label: '地址' }
      ]
    }
  },
  methods: {
    addColumn() {
      const newProp = `column${this.columns.length + 1}`;
      this.columns.push({
        prop: newProp,
        label: `新列${this.columns.length + 1}`,
        formatter: row => `自定义${row.name}`
      });
      this.tableData.forEach(item => {
        item[newProp] = `值${Math.random().toString(36).substr(2, 5)}`;
      });
    },
    removeRow(index) {
      this.tableData.splice(index, 1);
    }
  }
}
</script>