vue实现动态columns
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
}
}
