如何使用elementUI实现如图静态效果？

很抱歉，我没有看到您提到的图形。但是，根据您提到的是使用 Element UI 来实现效果，我可以给出一些使用 Element UI 实现复杂布局的一般步骤：

在您的项目中集成 Element UI 组件库。

使用 Element UI 提供的布局组件如 el-row 和 el-col，通过嵌套和使用各种属性和样式来完成目标布局。

根据您要展示的具体内容，将内容放置在适当的 el-row 和 el-col 组件中。可以在需要的地方添加其他的 Element UI 组件来实现更复杂的布局效果。

根据需要，使用 Element UI 库的样式设置来自定义布局组件的大小、颜色等外观属性。

在需要时添加事件处理程序，以响应用户交互和动态元素的变化。

可以通过参考 Element UI 官方文档和示例代码来了解如何使用 Element UI 实现各种复杂布局。这里提供一个基本的示例代码：

<template>

 <el-row>

   <el-col :span="16">

     <!-- 放置列表内容 -->

   </el-col>

   <el-col :span="8">

     <el-card>

       <!-- 放置右侧面板内容 -->

     </el-card>

   </el-col>

 </el-row>

</template>

此处使用 el-row 和 el-col 组件来创建一个两列布局，其中左侧 el-col 组件的宽度为 16 格，右侧 el-col 组件的宽度为 8 格。在左侧部分可以放置列表内容，右侧部分可以放置一个带标题栏的卡片组件，以展示相关信息。根据实际需求，可以在此基础上进行适当调整。

首先看下我的效果图

需求

当选择某一行的时候要选择当前行，并且将当前行的用户数据显示在头部；如果已经选中，则取消选中效果同时删除头部对应的用户图像，当切换分页时如果头部已经有选中，则勾选对应的行，当编辑时，也要进行回显

原因

elementUI的table组件提供的toggleRowSelection方法不生效

实现

    a-首先放弃使用组件内置提供的seletion选项，使用插槽自定义

    b-当获取数据后，向自定义的选择框添加绑定事件

        （使用jquery是因为原生的removeEventListener无法成功解绑事件，这会导致事件重复执行多次而渲染错误；当为激活状态时                                    使用active作为标记）

c-筛选el-table点击事件，使其只在点击选择框时触发，同时向头像框数据push或者delete

    （经过调试，当column.label不存在时，即表示点击多选框；actorsImgs就是用于显示图像的数据容器；activeRow则是内部记录的每一页的激活项）

d-当用户点击某个图像时，删除图像同时让对应多选框恢复为默认状态

e-当用户分页时，记录当前激活的page，并在相等时激活当前页的已选中项

    f-当为编辑时，首先需要获取当前行关联的用户；由于无法记录用户在那页有选中数据，因此需要手动计算

    （xb即计算出的当前页选中的变量）

至此，该功能实现完毕。（ps，如果有相同需求的小伙伴，能够使用el-table提供的方法，麻烦留个言。因为本人尝试了多次无效）

2021-1-30更新，本文章只提供实现思路，因为在交付测试过程中仍然有bug，但由于本人偏懒就不重新整理了

---