当前位置：首页 > VUE

vue实现添加列

2026-01-17 08:59:01VUE

实现动态添加列

在Vue中实现表格列的动态添加，可以通过数据驱动视图的特性完成。以下提供两种常见实现方式：

基于数组绑定的动态列

通过v-for循环渲染表头和数据列，修改columns数组即可动态增删列：

vue实现添加列

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="addColumn">添加列</button>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'name', title: '姓名' },
        { key: 'age', title: '年龄' }
      ],
      data: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  },
  methods: {
    addColumn() {
      const newKey = `col_${Date.now()}`
      this.columns.push({
        key: newKey,
        title: '新列'
      })
      this.data.forEach(item => {
        item[newKey] = ''
      })
    }
  }
}
</script>

使用Element UI等组件库

主流UI库通常提供更完善的动态列功能。以Element UI为例：

vue实现添加列

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="col in columns"
      :key="col.prop"
      :prop="col.prop"
      :label="col.label">
    </el-table-column>
  </el-table>
  <el-button @click="addColumn">添加列</el-button>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' }
      ],
      tableData: [{
        date: '2023-01-01',
        name: '王五'
      }]
    }
  },
  methods: {
    addColumn() {
      const newProp = `address_${this.columns.length}`
      this.columns.push({
        prop: newProp,
        label: '地址'
      })
      this.tableData.forEach(row => {
        row[newProp] = ''
      })
    }
  }
}
</script>