el-table 动态列怎么拼装数据

要在El-table中动态拼装列数据，你需要先确定表格需要展示哪些列，并将这些列的属性存储在数组中。然后，你可以使用v-for指令在El-table中循环渲染列。

例如，以下代码展示了如何使用动态列渲染一个El-table：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
      <template v-if="column.type === 'template'">
        <span v-html="column.template"></span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, gender: 'Male' },
        { name: 'Jane', age: 25, gender: 'Female' },
        { name: 'Bob', age: 30, gender: 'Male' }
      ],
      columns: [
        { label: 'Name', prop: 'name', type: 'text' },
        { label: 'Age', prop: 'age', type: 'text' },
        { label: 'Gender', prop: 'gender', type: 'template', template: '<i class="icon-gender-{{ gender }}"></i>' }
      ]
    }
  }
}
</script>

在上述代码中，columns数组定义了表格需要展示的列，包括每列的标签、属性和类型。在El-table中，我们使用v-for指令循环渲染列。对于普通的列，我们可以直接使用El-table-column组件，设置prop和label属性即可。对于特殊列，例如上述代码中的Gender列，我们需要在El-table-column组件中添加一个template模板，使用v-html指令渲染模板内容。在模板中，我们可以使用Mustache语法（双大括号）来绑定数据。

最后，我们将tableData和columns数组绑定到El-table组件上，即可动态渲染表格。