最近在做系统的一些优化，有个需求就是针对展示列表，想自定义表头展示。
之前我们一直做的都是，默认展示重要的字段信息，然后再“详情”弹出模态窗口中展示所有字段，这样的话不能直观展示，并且需要弹出窗口再查看，字段较多的话还需要上下滑动查看，体验并不是很好。
查找了一下，实现了两种展示方式，一种是应用Transfer 穿梭框，另一种是Popover 弹出框。
先来方法一，应用Transfer 穿梭框：
html:
<el-button size="small" type="primary" v-if="permissions.isDelete" icon="el-icon-star-off" @click="dialogConVisible = true">设置</el-button>
<el-dialog :visible.sync="dialogConVisible" title="选择显示指标" center width="31%">
<el-transfer
v-model="defaultData"
:data="colData"
@change="handleSelectedValue"
:titles="['未显示列名', '显示列名']"
:button-texts="['移除', '添加']"
:props="{key: 'colIndex',label: 'title'}"
></el-transfer>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveColInfo()">确认</el-button>
</span>
</el-dialog>
html中table同时做调整，每个el-table-column添加v-if="colData[0].show"，对应colData同位置字段。
<el-table
:data="list"
border
highlight-current-row
align="center"
@selection-change="handleSelectionChange"
v-loading="listLoading"
stripe
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
>
<el-table-column
type="selection"
min-width="5%"
align="center"
/>
<el-table-column
prop="standCode"
label="员工编号"
min-width="15%"
align="center"
v-if="colData[0].show"
/>
<el-table-column
prop="name"
label="岗位名称"
min-width="15%"
align="center"
v-if="colData[1].show"
>
<template slot-scope="scope">
<a @click="detailData(scope.row)">{{ scope.row.name }}</a>
</template>
</el-table-column>
<el-table-column
prop="standCode"
label="岗位编码"
min-width="10%"
align="center"
v-if="colData[2].show"
/>
<el-table-column
prop="workModeName"
label="施工类型"
min-width="15%"
align="center"
v-if="colData[3].show"
/>
<el-table-column
prop="stsName"
label="状态"
min-width="8%"
align="center"
v-if="colData[4].show"
/>
<el-table-column
prop="stsDate"
label="状态时间"
min-width="15%"
align="center"
v-if="colData[5].show"
/>
<el-table-column
prop="remarks"
label="岗位说明"
min-width="15%"
align="center"
v-if="colData[6].show"
/>
<el-table-column
label="操作"
min-width="15%"
align="center"
>
<template slot-scope="scope">
<el-button icon="el-icon-view" v-if="permissions.isView" type="text" size="small" @click="handleShow(scope.row)">查看</el-button>
<el-button icon="el-icon-edit" v-if="permissions.isEdit" type="text" size="small" @click="handleUpdate(scope.row)">修改</el-button>
<el-button icon="el-icon-delete" v-if="permissions.isDelete" type="text" size="small" @click="handleDelete(scope.row)">注销</el-button>
</template>
</el-table-column>
</el-table>
js：
data() {
return {
dialogConVisible: false,//表头设置穿梭框默认
colData: [{title: "员工编号",colIndex:0,show: false},
{title: "岗位名称",colIndex:1,show: true},
{title: "岗位编码",colIndex:2,show: true},
{title: "施工类型",colIndex:3,show: true},
{title: "状态",colIndex:4,show: true},
{title: "状态时间",colIndex:5,show: true},
{title: "岗位说明",colIndex:6,show: true},
{title: "操作",colIndex:7,show: true}],
defaultData: [1,2,3,4,5,6,7],//默认展示列对应colIndex
selectCol:[],//选中展示列对应colIndex
}
}
methods: {
//新增
saveColInfo(){
let _this = this
let selectCol = _this.selectCol
this.colData.filter(i => {
if (selectCol.indexOf(i.colIndex) != -1) {
i.show = true;
} else {
i.show = false;
}
});
_this.dialogConVisible = false
console.log(this.colData)
},
handleSelectedValue(value, direction, movedKeys) {
let _this = this
//可以通过direction回调right/left 来进行操作，right：把数字移到右边，left把数据移到左边,value值：右侧显示列名对应colIndex
if(direction === "right") {
_this.selectCol = value; console.log(_this.selectCol)
}
if(direction === "left") {
_this.selectCol = value;
}
},
}
实现效果：
image.png
方法二：Popover 弹出框
html:同样在el-table-column添加v-if="colData[4].istrue"，然后：
<el-popover placement="right" width="800" trigger="click">
<el-checkbox-group v-model="colOptions">
<el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>
</el-checkbox-group>
<el-button size="small" type="primary" v-if="permissions.isDelete" icon="el-icon-star-off" slot="reference" style="margin-left: 10px;">设置</el-button>
</el-popover>
js：
data() {
return {
colData: [{title: "员工编号",istrue: true},
{title: "员工名称",istrue: true},
{title: "性别",istrue: true},
{title: "组织机构",istrue: true},
{title: "手机号",istrue: true},
{title: "民族",istrue: true},
{title: "地址",istrue: true},
{title: "学校",istrue: true},
{title: "邮箱",istrue: true}],
colOptions: [],
colSelect: [],
}
}
created() {
//设置表头新增
this.permissions=handleMenuPermission('system:organization:staff')//处理按钮权限
var _this = this;
for (let i = 0; i < _this.colData.length; i++) {
_this.colSelect.push(_this.colData[i].title);
if (_this.colData[i].title == '名称') { //初始化不想展示的列可以放在这个条件里
continue;
}
_this.colOptions.push(_this.colData[i].title);
}
},
//设置表头新增
watch: {
colOptions(valArr) {
var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
this.colData.filter(i => {
if (arr.indexOf(i.title) != -1) {
i.istrue = false;
this.$nextTick(() => {
this.$refs.tableDataRef.doLayout();
});
} else {
i.istrue = true;
this.$nextTick(() => {
this.$refs.tableDataRef.doLayout();
});
}
});
}
},
实现效果：
image.png
网友评论