当前位置：首页 > VUE

vue elementui实现动态表格

2026-01-21 05:36:17VUE

实现动态表格的基本思路

使用Vue和ElementUI实现动态表格的核心在于动态绑定表格数据和列信息。通过Vue的响应式特性，可以灵活地增减表格行或列。

基础动态表格实现

安装ElementUI后，在组件中引入el-table和el-table-column：

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

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        { prop: 'address', label: '地址' }
      ],
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京' },
        { date: '2023-01-02', name: '李四', address: '上海' }
      ]
    }
  }
}
</script>

动态添加行数据

通过数组操作实现行的动态增减：

methods: {
  addRow() {
    this.tableData.push({
      date: '新日期',
      name: '新姓名',
      address: '新地址'
    })
  },
  removeRow(index) {
    this.tableData.splice(index, 1)
  }
}

动态修改列信息

通过修改columns数组实现列的动态变化：

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

动态表头与复杂内容

对于需要自定义内容的列，可以使用作用域插槽：

<el-table-column 
  v-for="(col, index) in columns" 
  :key="index"
  :prop="col.prop" 
  :label="col.label">
  <template #default="scope">
    <el-input 
      v-if="col.editable"
      v-model="scope.row[col.prop]"
      @change="handleEdit(scope.row)">
    </el-input>
    <span v-else>{{ scope.row[col.prop] }}</span>
  </template>
</el-table-column>

完整示例代码

<template>
  <div>
    <el-button @click="addRow">添加行</el-button>
    <el-button @click="addColumn">添加列</el-button>

    <el-table :data="tableData" border>
      <el-table-column 
        v-for="(col, index) in columns" 
        :key="index"
        :prop="col.prop" 
        :label="col.label">
        <template #default="scope">
          <el-input 
            v-if="col.editable"
            v-model="scope.row[col.prop]">
          </el-input>
          <span v-else>{{ scope.row[col.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="removeRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'date', label: '日期', editable: true },
        { prop: 'name', label: '姓名', editable: true },
        { prop: 'address', label: '地址', editable: true }
      ],
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京' },
        { date: '2023-01-02', name: '李四', address: '上海' }
      ]
    }
  },
  methods: {
    addRow() {
      const newRow = {}
      this.columns.forEach(col => {
        newRow[col.prop] = `新${col.label}`
      })
      this.tableData.push(newRow)
    },
    removeRow(index) {
      this.tableData.splice(index, 1)
    },
    addColumn() {
      const propName = `column${this.columns.length + 1}`
      this.columns.push({
        prop: propName,
        label: `新列${this.columns.length}`,
        editable: true
      })
      this.tableData.forEach(row => {
        row[propName] = '默认值'
      })
    }
  }
}
</script>