本篇文章给大家带来《element ui table动态列》，石家庄人才网对文章内容进行了深度展开说明，希望对各位有所帮助，记得收藏本站。

在使用 Element UI 开发时，经常会遇到需要动态生成表格列的需求。例如，根据后端返回的数据结构动态展示表格列，或者根据用户的操作动态添加或删除表格列等。本文将介绍如何使用 Element UI table 组件实现动态列的功能。

首先，我们需要定义一个 columns 数组，用来存储表格列的配置信息。每个数组元素代表一列，包含以下属性：

• prop：对应列数据的属性名。
• label：列标题。
• width：列宽度。
• 其他属性：例如 align、formatter 等。

例如，以下代码定义了一个包含两列的 columns 数组：

data() {  return {    columns: [      { prop: 'name', label: '姓名', width: 180 },      { prop: 'age', label: '年龄', width: 80 },    ],  };},

接下来，在 template 中使用 el-table 组件，并将 columns 属性绑定到定义的 columns 数组上：

<el-table :data="tableData" :columns="columns"></el-table>
ode>

其中，tableData 是表格数据，可以是静态数据，也可以是通过接口动态获取的数据。石家庄人才网小编提示您，到这里，我们就实现了一个简单的表格，但是列是静态的。接下来，我们将介绍如何动态生成表格列。

动态生成表格列的关键在于根据数据动态生成 columns 数组。例如，假设后端返回的数据结构如下：

[  { name: '张三', age: 18, city: '北京' },  { name: '李四', age: 20, city: '上海' },];

我们可以遍历数据对象

this.columns = Object.keys(data[0]).map((key) => ({  prop: key,  label: key,}));

this.columns.push({  label: '操作',  width: 100,  render: (h, { row, column, $index }) => {    return h('div', [      h('el-button', { props: { type: 'text', size: 'small' }, on: { click: () => this.handleClick(row) } }, '编辑'),      h('el-button', { props: { type: 'text', size: 'small' }, on: { click: () => this.handleDelete(row) } }, '删除'),    ]);  },});