vue-element动态渲染表头(el-table-column)

需求：

1、不同类型的表头来回切换需要动态v-for渲染表头，如（[北京、上海、广州、深圳]，[大众、丰田、日产、本田]，[小型车、紧凑型、中型车、中大型]），表头内容全部由后端传递，每组内容不固定；

2、一级表头下还需要嵌套两个二级表头（如销量、增长率）；

3、增长率正为红色，负为绿色；

4、列表产生横向滚动条时，时间一列固定在最左侧。

要通过Vue的前端界面修改左侧菜单栏的权限，您可以将菜单项数据存储在Vue组件的data属性中，并根据用户不同的权限来动态设置菜单的显示方式。具体步骤如下：

1. 在Vue组件中创建一个data属性，用来存储菜单项的数据。例如：

```

data() {

return {

menuItems: [

{ name: '仪表盘', icon: 'el-icon-menu', path: '/dashboard', canView: true },

{ name: '用户管理', icon: 'el-icon-user', path: '/users', canView: false },

{ name: '文章管理', icon: 'el-icon-document', path: '/article', canView: true }

]

}

}

```

2. 使用v-for循环渲染menuItems数组中的菜单项，并使用v-if根据canView属性动态设置菜单项的显示方式。例如：

```

<el-menu>

<el-menu-item v-for="item in menuItems" :key="item.path" v-if="item.canView">

<i :class="item.icon"></i>

<span slot="title">{{ item.name }}</span>

</el-menu-item>

</el-menu>

```

在这个示例中，只有canView属性为true的菜单项才会被渲染出来。

3. 在Vue组件的methods属性中添加一个方法，用来在界面上修改菜单项的权限。例如：

```

methods: {

changeMenuView(item) {

item.canView = !item.canView

}

}

```

在这个示例中，changeMenuView方法会根据传入的菜单项item对象的canView属性值进行取反 *** 作，实现菜单项权限的修改。

完成上述 *** 作后，您就可以通过界面修改菜单项的权限，从而实现动态显示和隐藏的效果。这种方法可以使应用程序更加灵活，便于根据用户角色对菜单进行动态控制。

Header.vue

LeftMenu.vue

Main.vue

index.vue

注：

1、加载的过程是index.html->main.js->app.vue->index.js->helloworld.vue

2、element-ui样式不生效：main.js导入import 'element-ui/lib/theme-chalk/index.css'

---