当前位置：首页 > VUE

vue实现动态columns

2026-01-19 03:50:15VUE

Vue 实现动态 columns 的方法

使用 v-for 动态渲染表格列

通过 v-for 指令可以动态渲染表格的列，columns 数据可以来自组件的 props 或 data。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">
          {{ column.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td v-for="column in columns" :key="column.key">
          {{ item[column.dataIndex] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

动态修改 columns 数据

可以通过方法动态修改 columns 数据，实现列的增删改查。

methods: {
  addColumn() {
    this.columns.push({
      key: 'newColumn',
      title: 'New Column',
      dataIndex: 'newColumn'
    })
  },
  removeColumn(key) {
    this.columns = this.columns.filter(column => column.key !== key)
  }
}

使用计算属性处理动态列

计算属性可以用于对 columns 数据进行处理，例如过滤、排序等。

computed: {
  filteredColumns() {
    return this.columns.filter(column => !column.hidden)
  }
}

结合插槽实现更灵活的列渲染

使用插槽可以自定义列的渲染方式，提供更大的灵活性。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">
          <slot :name="`header-${column.key}`" :column="column">
            {{ column.title }}
          </slot>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td v-for="column in columns" :key="column.key">
          <slot :name="`cell-${column.key}`" :item="item" :column="column">
            {{ item[column.dataIndex] }}
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

使用第三方组件库

许多 Vue 组件库如 Element UI、Ant Design Vue 等提供了动态 columns 的功能。

<template>
  <el-table :data="data">
    <el-table-column
      v-for="column in columns"
      :key="column.key"
      :prop="column.dataIndex"
      :label="column.title"
    />
  </el-table>
</template>

响应式 columns

结合 Vue 的响应式特性，columns 的变化会自动触发视图更新。

watch: {
  columns: {
    handler(newVal) {
      console.log('Columns changed', newVal)
    },
    deep: true
  }
}

vue实现动态columns

标签: 动态 vue

分享给朋友：

项目基于vue实现

基于Vue实现项目的关键方法搭建基础环境安装Node.js和npm/yarn，确保开发环境具备运行Vue的能力。通过Vue CLI快速初始化项目结构，选择所需配置（如Babel、Router、Vu…

vue的动画实现

Vue 动画实现方式 Vue 提供了多种方式实现动画效果，主要通过内置组件和第三方库支持。使用 Vue 内置过渡组件 Vue 的 transition 和 transition-group 组件可…

vue动态组建实现原理

Vue 动态组件的实现原理 Vue 的动态组件主要通过 component 标签和 is 属性实现，核心原理涉及组件的动态切换和渲染机制。动态组件的实现方式使用 component 标签和…

vue路由实现内部切换

Vue 路由实现内部切换的方法 Vue Router 是 Vue.js 官方的路由管理器，用于实现单页应用（SPA）的页面切换。以下是几种常见的内部路由切换方式：使用 <router-li…

vue实现文章锚点定位

实现文章锚点定位的方法在Vue中实现文章锚点定位可以通过多种方式完成，以下是几种常见的方法：使用原生HTML锚点通过HTML的id属性和<a>标签的href属性实现锚点跳转。在Vu…

vue 实现单选

Vue 实现单选功能在 Vue 中实现单选功能可以通过多种方式，以下是几种常见的方法：使用原生 <input type="radio"> 绑定 v-model 通过 v-model…

vue实现动态columns