element ui 实现table表头自定义展示

最近在做系统的一些优化，有个需求就是针对展示列表，想自定义表头展示。

之前我们一直做的都是，默认展示重要的字段信息，然后再“详情”d出模态窗口中展示所有字段，这样的话不能直观展示，并且需要d出窗口再查看，字段较多的话还需要上下滑动查看，体验并不是很好。

查找了一下，实现了两种展示方式，一种是应用Transfer 穿梭框，另一种是Popover d出框。

先来 方法一 ，应用 Transfer 穿梭框 ：

html:

html中table同时做调整，每个el-table-column添加v-if="colData[0]show"，对应colData同位置字段。

js：

实现效果：

方法二：Popover d出框

html:同样在el-table-column添加v-if="colData[4]istrue"，然后：

js：

实现效果：

是的，Element-UI是一个基于Vuejs开发的UI组件库，需要在服务器上运行。如果您想在本地开发调试，可以通过搭建本地服务器进行访问。另外，Element-UI也可以通过CDN引入，但使用CDN会有一定的限制，如无法本地开发调试等。因此，在实际项目中，建议使用服务器部署Element-UI。

elementUI中的表格增加复选功能并进行数据回显

第一步：我先把elementui中的表格格式展示出来

要注意el-table标签里面的@selection-change="handleSelectionChange"这个方法,下面会用到的。还有ref属性，在下面都会用到。还有这里的type，是elementui自带的，自己去看文档。

第二步：就是要写逻辑，拿数据了。

众所周知Vue中的数据绑定在data中,方法挂载在methods中,

如图：

这里的方法就是上面在table里面绑定的一个@selection-change="handleSelectionChange"，就是通过这个方法，点击复选框，进行传参val来获取到每行的数据，记录每行，在循环遍历val，拿到的当前行的id，放到声明数组中arr。

第三步：这里就要循环遍历，拿到数据的总数组和选中的数组了，双循环，将两个数组中的id进行判断，比较。

如图：

第四步：提交页面选中数据。

如图：

这样就完成了。

最后，致所有前端开发，共勉。

注意：target属性是为了获取产生滚动条的dom元素，所以target属性里面的类，应该要精准指向产生滚动条的dom对象，要不然就无法生效，参考el-backtop组件源码：

根据源码中init()函数可知，当target未设置时，当前滚动 *** 作对象默认为documentdocumentElement对象,即html根节点，当设置了target时，会根据target里面填写的类名去querySelector查找该元素，而且根据该类应只能精准查找到一个元素，注意querySelector和querySelectorAll的区别，前者只返回对应查找条件找到的第一个元素，所以target类名要精准且唯一，否则backtop组件则无效。

以上就是关于element ui 实现table表头自定义展示全部的内容，包括:element ui 实现table表头自定义展示、element-ui需要打开服务器、elementUI表格数据复选框回显等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！