vue实现添加列

Vue 实现添加列的方法

使用 v-for 动态渲染列

在 Vue 中，可以通过 v-for 指令动态渲染列。首先在 data 中定义一个数组来存储列数据，然后通过方法向数组中添加新的列。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.id">{{ column.name }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td v-for="column in columns" :key="column.id">{{ column.value }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="addColumn">添加列</button>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { id: 1, name: '列1', value: '值1' },
        { id: 2, name: '列2', value: '值2' }
      ]
    }
  },
  methods: {
    addColumn() {
      const newId = this.columns.length + 1
      this.columns.push({
        id: newId,
        name: `列${newId}`,
        value: `值${newId}`
      })
    }
  }
}
</script>

使用组件实现可复用的列

对于更复杂的场景，可以将列封装为组件，通过 props 传递数据，实现更灵活的列添加功能。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.id">
          <column-header :column="column" />
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td v-for="column in columns" :key="column.id">
          <column-cell :column="column" />
        </td>
      </tr>
    </tbody>
  </table>
  <button @click="addColumn">添加列</button>
</template>

<script>
import ColumnHeader from './ColumnHeader.vue'
import ColumnCell from './ColumnCell.vue'

export default {
  components: {
    ColumnHeader,
    ColumnCell
  },
  data() {
    return {
      columns: [
        { id: 1, name: '列1', value: '值1' },
        { id: 2, name: '列2', value: '值2' }
      ]
    }
  },
  methods: {
    addColumn() {
      const newId = this.columns.length + 1
      this.columns.push({
        id: newId,
        name: `列${newId}`,
        value: `值${newId}`
      })
    }
  }
}
</script>

使用 Vuex 管理列状态

在大型应用中，可以使用 Vuex 集中管理列的状态，使列的添加和删除更加可控。

// store.js
export default new Vuex.Store({
  state: {
    columns: [
      { id: 1, name: '列1', value: '值1' },
      { id: 2, name: '列2', value: '值2' }
    ]
  },
  mutations: {
    ADD_COLUMN(state, column) {
      state.columns.push(column)
    }
  },
  actions: {
    addColumn({ commit }, column) {
      commit('ADD_COLUMN', column)
    }
  }
})

// Component.vue
<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in $store.state.columns" :key="column.id">{{ column.name }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td v-for="column in $store.state.columns" :key="column.id">{{ column.value }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="addColumn">添加列</button>
</template>

<script>
export default {
  methods: {
    addColumn() {
      const newId = this.$store.state.columns.length + 1
      this.$store.dispatch('addColumn', {
        id: newId,
        name: `列${newId}`,
        value: `值${newId}`
      })
    }
  }
}
</script>

动态绑定列属性

如果需要动态绑定列的属性，可以使用 v-bind 或简写的 : 来实现。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.id" :style="column.style">{{ column.name }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td v-for="column in columns" :key="column.id" :class="column.class">{{ column.value }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="addColumn">添加列</button>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { id: 1, name: '列1', value: '值1', style: { color: 'red' }, class: 'highlight' },
        { id: 2, name: '列2', value: '值2', style: { color: 'blue' }, class: '' }
      ]
    }
  },
  methods: {
    addColumn() {
      const newId = this.columns.length + 1
      this.columns.push({
        id: newId,
        name: `列${newId}`,
        value: `值${newId}`,
        style: { color: 'green' },
        class: 'highlight'
      })
    }
  }
}
</script>

以上方法可以根据实际需求选择使用，灵活实现 Vue 中的列添加功能。