VUE element UI实现动态生成左侧表头

Vue结合Element UI实现动态生成左侧表头通常涉及到动态绑定组件的属性和事件监听。Element UI提供了一个`<el-table>`组件，可以用来创建表格，并且其`column`属性允许我们动态定义表头。以下是基本步骤和一个简单示例：

1. 首先，确保你已经在项目中安装并引入了Element UI。
2. 创建一个Vue组件，并在data中定义表格数据以及列的配置信息。
3. 使用v-for指令在`<el-table>`组件的`column`属性上渲染列配置，根据动态数据生成表头。

示例代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="item in columns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item.width">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 这里是表格数据
      ],
      columns: [
        {
          prop: 'date',
          label: '日期',
          width: 180
        },
        {
          prop: 'name',
          label: '姓名',
          width: 180
        },
        {
          prop: 'address',
          label: '地址',
          width: 300
        }
        // 可以根据实际需要动态添加更多列
      ]
    };
  }
}
</script>

在这个示例中，`columns`数组用于存储列的配置信息，其中每个对象定义了一个表头的属性、标签和宽度。`v-for`指令用于遍历`columns`数组，并动态生成`<el-table-column>`元素。