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：

实现效果：

基于vue框架，使用element-ui组件库写表单效果，需要添加字体小图标，效果如下：

1.只需要添加prefix-icon="iconfont icon-xxx"即可（头部插入）

//例如

<el-input

prefix-icon="iconfont icon-sousuo"

v-model="searchTableInfo"

placeholder="请输入姓名"

style="width:240px"

></el-input>

1

2

3

4

5

6

7

2.添加suffix-icon=“iconfont icon-xxx”（尾部添加）

//例如

<el-input

suffix-icon="iconfont icon-sousuo"

v-model="searchTableInfo"

placeholder="请输入姓名"

style="width:240px"

></el-input>

---