支持表格列显隐状态记忆

This commit is contained in:
RuoYi
2026-03-31 19:50:13 +08:00
parent 9753007f94
commit a57fbeb1a3

View File

@@ -38,6 +38,8 @@
</template> </template>
<script> <script>
import cache from '@/plugins/cache'
export default { export default {
name: "RightToolbar", name: "RightToolbar",
data() { data() {
@@ -76,6 +78,11 @@ export default {
type: Number, type: Number,
default: 10 default: 10
}, },
/* 列显隐状态记忆的 localStorage key传入则启用记忆不传则不记忆 */
storageKey: {
type: String,
default: ""
}
}, },
computed: { computed: {
style() { style() {
@@ -103,6 +110,23 @@ export default {
} }
}, },
created() { created() {
// 如果传入了 storageKey从 localStorage 恢复列显隐状态
if (this.storageKey) {
try {
const saved = cache.local.getJSON(this.storageKey)
if (saved && typeof saved === 'object') {
if (Array.isArray(this.columns)) {
this.columns.forEach((col, index) => {
if (saved[index] !== undefined) col.visible = saved[index]
})
} else {
Object.keys(this.columns).forEach(key => {
if (saved[key] !== undefined) this.columns[key].visible = saved[key]
})
}
}
} catch (e) {}
}
if (this.showColumnsType == 'transfer') { if (this.showColumnsType == 'transfer') {
// transfer穿梭显隐列初始默认隐藏列 // transfer穿梭显隐列初始默认隐藏列
if (Array.isArray(this.columns)) { if (Array.isArray(this.columns)) {
@@ -168,6 +192,7 @@ export default {
this.columns[key].visible = !data.includes(index) this.columns[key].visible = !data.includes(index)
}) })
} }
this.saveStorage()
}, },
// 打开显隐列dialog // 打开显隐列dialog
showColumn() { showColumn() {
@@ -180,6 +205,7 @@ export default {
} else { } else {
this.columns[key].visible = event this.columns[key].visible = event
} }
this.saveStorage()
}, },
// 切换全选/反选 // 切换全选/反选
toggleCheckAll() { toggleCheckAll() {
@@ -189,6 +215,20 @@ export default {
} else { } else {
Object.values(this.columns).forEach((col) => (col.visible = newValue)) Object.values(this.columns).forEach((col) => (col.visible = newValue))
} }
this.saveStorage()
},
// 将当前列显隐状态持久化到 localStorage
saveStorage() {
if (!this.storageKey) return
try {
let state = {}
if (Array.isArray(this.columns)) {
this.columns.forEach((col, index) => { state[index] = col.visible })
} else {
Object.keys(this.columns).forEach(key => { state[key] = this.columns[key].visible })
}
cache.local.setJSON(this.storageKey, state)
} catch (e) {}
} }
}, },
} }