表格里的选项有很多,仅仅展示想展示的列,把不需要的隐藏起来,而且这次设置的,下次在进这个页面也要是现在显示列,同一个账号不同电脑也要如此,因为用的是若依框架,所以直接引用了组件
这里是若依自带的子组件,仅仅添加了第181行。
<template>
<div class="top-right-btn">
<el-row>
<el-popover
class="item"
placement="bottom"
width="170"
trigger="hover"
style="padding-right: 10px"
v-if="energyTip"
>
<table width="140" align="center">
<tr>
<td><div class="ceiling" style="background-color: #f00"></div></td>
<td>数据异常</td>
</tr>
<tr>
<td><div></div></td>
<td>无数据</td>
</tr>
</table>
<el-button
icon="el-icon-warning-outline"
size="mini"
slot="reference"
circle
></el-button>
</el-popover>
<el-popover
class="item"
placement="bottom"
width="170"
trigger="hover"
style="padding-right: 10px"
v-if="tip"
>
<table width="140" align="center">
<tr>
<td>
<div class="ceiling" style="background-color: #fd7f40"></div>
</td>
<td>上限</td>
</tr>
<tr>
<td>
<div class="ceiling" style="background-color: #d83706"></div>
</td>
<td>上上限</td>
</tr>
<tr>
<td>
<div class="ceiling" style="background-color: #fad46e"></div>
</td>
<td>下限</td>
</tr>
<tr>
<td>
<div class="ceiling" style="background-color: #b98804"></div>
</td>
<td>下下限</td>
</tr>
<tr>
<td>
<div class="ceiling" style="background-color: #bfbfbf"></div>
</td>
<td>超时</td>
</tr>
<tr>
<td><div></div></td>
<td>上数为空</td>
</tr>
<tr>
<td>
<div>
<hr size="5px" width="20px" color="#bfbfbf" align="left" />
</div>
</td>
<td>没有上数</td>
</tr>
<tr>
<td><div>/</div></td>
<td>无点位</td>
</tr>
</table>
<el-button
icon="el-icon-warning-outline"
size="mini"
slot="reference"
circle
></el-button>
</el-popover>
<!-- <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
</el-tooltip> -->
<!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
</el-tooltip> -->
<el-tooltip
class="item"
effect="dark"
content="显隐列"
placement="top"
v-if="columns"
>
<el-button
size="mini"
circle
icon="el-icon-menu"
@click="showColumn()"
/>
</el-tooltip>
</el-row>
<el-dialog :title="title" :visible.sync="open" append-to-body>
<div class="edit_dev">
<el-transfer
:titles="['显示', '隐藏']"
v-model="value"
:data="columns"
@change="dataChange"
></el-transfer>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "RightToolbar",
data() {
return {
// 显隐数据
value: [],
// 弹出层标题
title: "显示/隐藏",
// 是否显示弹出层
open: false,
};
},
props: {
showSearch: {
type: Boolean,
default: true,
},
energyTip: {
type: Boolean,
default: false,
},
tip: {
type: Boolean,
default: false,
},
columns: {
type: Array,
},
},
created() {
// 显隐列初始默认隐藏列
for (let item in this.columns) {
if (this.columns[item].visible === false) {
this.value.push(parseInt(item));
}
}
},
methods: {
// 搜索
toggleSearch() {
this.$emit("update:showSearch", !this.showSearch);
},
// 刷新
refresh() {
this.$emit("queryTable");
},
// 右侧列表元素变化
dataChange(data) {
for (var item in this.columns) {
const key = this.columns[item].key;
this.columns[item].visible = !data.includes(key);
}
this.$emit("changeColumn", this.columns);//因为要存到后台所以写了这个事件,修改完之后拿到改后的数组
},
// 打开显隐列dialog
showColumn() {
for (let item in this.columns) {
if (this.columns[item].visible === false) {
this.value.push(parseInt(item));
}
}
this.open = true;
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
border-radius: 50%;
padding: 12px;
display: block;
margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
margin-bottom: 10px;
}
</style>
<style scoped>
/deep/ .el-transfer-panel {
width: 280px !important;
}
.ceiling {
width: 20px;
height: 20px;
}
</style>
首先,在初始页面data定义一个columns
columns: [
{ key: 0, label: `你`, visible: true, width: "50" },
{ key: 1, label: `想`, visible: true, width: "50" },
{ key: 2, label: `展示`, visible: true, width: "50" },
{ key: 3, label: `的`, visible: true, width: "50" },
{ key: 4, label: `标题名`, visible: true, width: "50" },
{ key: 5, label: `也就是穿梭狂中的`, visible: true, width: "50" },
{ key: 6, label: `内容`, visible: true, width: "50" },
],
初始就直接展示自己写的,需要后台的是两个接口,一个取,一个修改。
加载页面的时候,调取第一个接口
// 获取原来的,显隐列
async getColum() {
const res = await getByUserId({
//这个接口传参是你和后台商量的~
//我就不展示了
});
let asd = JSON.parse([res.data[0].columnText]);
//因为咱们是将整个数组直接放到数据库,所以需要处理一下格式
this.columns = asd; //这个就是每次打开页面,就是之前你之前修改过的显隐列,存到数据库里的
},
下面说一下存,存,就是每次修改完显隐列,
上面的代码放到公共组件,
<right-toolbar
:columns="columns"
@changeColumn="changeColumn"
></right-toolbar>
这个是引用,changeColumn 是我在上面181行添加的子组件修改父组件的时间
changeColumn(val) {
let data = JSON.stringify(val);//需要转换一下格式,
editColumnSetting({
依然是调取接口传给后台
}).then(() => {});
this.$refs.index.changeColumn();//重新加载一下页面
},
也是第一次写存储的显隐列,这时候有一个缺陷就是,如果你想要添加一列,就得让后台手动清除数据。
如果你们还有更好的方法或者我的有什么问题可以优化,我们也可以一起讨论~