vue element ui动态渲染表格

在Vue和Element UI中，动态渲染表格需要以下几个步骤：

1. 定义表格的列属性

// 表格的列属性
const tableColumns = [
  {
    prop: 'name',
    label: '姓名',
    width: '100'
  },
  {
    prop: 'age',
    label: '年龄',
    width: '100'
  },
  {
    prop: 'gender',
    label: '性别',
    width: '100'
  }
]

2. 定义表格的数据

// 表格的数据
const tableData = [
  {
    name: '张三',
    age: 20,
    gender: '男'
  },
  {
    name: '李四',
    age: 25,
    gender: '女'
  },
  {
    name: '王五',
    age: 30,
    gender: '男'
  }
]

3. 在模板中使用`<el-table>`标签渲染表格，并使用`v-for`指令动态渲染表格的列和数据

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width"></el-table-column>
    </el-table>
  </div>
</template>

4. 在Vue实例中引入表格的列属性和数据

export default {
  data() {
    return {
      tableColumns,
      tableData
    }
  }
}

这样就可以动态渲染表格了。需要注意的是，`<el-table-column>`标签的`prop`属性需要和表格数据中的属性名保持一致，否则数据将无法正确渲染。