elementui动态el-table-column并插入数据写法？

可以使用 v-for 指令动态生成 el-table-column，同时使用 :prop 和 :label 绑定数据。具体代码如下：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 }
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' }
      ]
    }
  }
}
</script>

在上面的代码中，tableData 是表格数据，columns 是动态生成的 el-table-column 的配置项，包括每列的 prop 和 label。

相关问题

<el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="id" label="客户编号" width="100"/><el-table-column fixed="right" label="操作" width="250"> <template #default="{row}">这是row上面的代码，row取到的是什么值？，还能向上面那样写吗

在这个例子中，`row` 是由 `el-table` 组件提供的一个插槽属性，它代表当前行的数据。你可以通过 `row` 来访问当前行的所有属性。

在你提供的代码中，`row` 代表了每一行的数据对象。例如，如果 `tableData` 是一个包含多个对象的数组，那么当渲染表格时，每一行的数据对象都会传递给 `row`。你可以通过 `row.id` 来获取当前行的 `id` 属性。

是的，你可以像上面那样在 `template` 中使用 `row`，并通过 `row.xxx` 来访问当前行的其他属性。例如，在你的例子中，你可以通过 `row.id` 来获取当前行的客户编号。

请注意，这里使用的是 Vue.js 的模板语法，所以你只能在模板中使用这种写法。在 JavaScript 代码中是无法直接访问到 `row` 的。

el-table-column里内容错乱

el-table-column里内容错乱的问题可能是由于列位置和表头样式错乱导致的。解决这个问题的方法有两种：

1. 使用`:key`属性：在el-table-column标签中添加`:key`属性，并设置为一个随机数，例如`:key="Math.random()"`。这样可以确保每次渲染时都会生成一个新的key，从而避免错乱的问题。修正后的写法如下所示：

<el-table-column label="test" :key="Math.random()" v-if="active !== '2'"></el-table-column>

2. 覆盖样式：如果el-table-column列加了fixed="right"操作后出现高度错乱的问题，可以通过覆盖样式来解决。在样式中添加以下代码：

.custom_table ::v-deep .el-table__fixed-right, .custom_table::v-deep .el-table__fixed {
  height: 100% !important;
}

这样可以将el-table__fixed-right和el-table__fixed的高度设置为100%，从而避免高度错乱的问题。