【fix 66426】完成JTable的隐藏冻结列控制
This commit is contained in:
danshihao
@@ -0,0 +1,299 @@
|
|||||||
|
<template>
|
||||||
|
<a-table
|
||||||
|
ref='table'
|
||||||
|
:table-key="tableKey"
|
||||||
|
:columns="resultColumns"
|
||||||
|
v-bind="$attrs"
|
||||||
|
v-on="$listeners">
|
||||||
|
|
||||||
|
<template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">
|
||||||
|
<slot :name="slotItem" v-bind="{text,record,index}"></slot>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div slot="settingDropdown">
|
||||||
|
<a-card>
|
||||||
|
<!-- scroll.x 要大于表格所有固定列宽的合，每个列都要有width，否则定位后宽度会出现变形，否则会出现问题 -->
|
||||||
|
<a-table
|
||||||
|
rowKey="key"
|
||||||
|
:style="settingStyle"
|
||||||
|
tableLayout="fixed"
|
||||||
|
size="small"
|
||||||
|
bordered
|
||||||
|
:pagination="false"
|
||||||
|
:scroll="settingScroll"
|
||||||
|
:data-source="settingDataSource"
|
||||||
|
:columns="settingColumns">
|
||||||
|
|
||||||
|
<a-checkbox slot="hide" slot-scope="text, record"
|
||||||
|
:checked="text"
|
||||||
|
:disabled="record.disabledHide"
|
||||||
|
@change="changeSetting(text, 'hide', record)"></a-checkbox>
|
||||||
|
<a-checkbox slot="freeze" slot-scope="text, record"
|
||||||
|
:checked="text"
|
||||||
|
:disabled="record.disabledFreeze"
|
||||||
|
@change="changeSetting(text, 'freeze', record)"></a-checkbox>
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
<a-icon ref='settingBtn' slot="settingIcon" type='setting' :style="{ fontSize:'16px', color: '#108ee9' }" />
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Vue from 'vue'
|
||||||
|
import { cloneDeep } from 'lodash'
|
||||||
|
|
||||||
|
// 操作列的key或dataIndex
|
||||||
|
const actionKey = 'action'
|
||||||
|
// 保存localStorage中的后缀
|
||||||
|
const saveSuffix = ':JTable'
|
||||||
|
// 拿到column的key
|
||||||
|
const getKey = col => col.key || col.dataIndex
|
||||||
|
// 所有JTable的缓存key
|
||||||
|
const J_TABLE_KEYS = 'J_TABLE_KEYS'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 以下 表格为实际要展示的表、配置表为设置冻结和隐藏的表
|
||||||
|
* 执行流程梳理
|
||||||
|
* 1.mounted挂载时去拿配置
|
||||||
|
* 1.1.从localStorage取历史配置:取到直接进入2 没取到就进1.2
|
||||||
|
* 1.2.从父组件获取columns初始化配置 并存储到localStorage
|
||||||
|
*
|
||||||
|
* 2.拿到配置后
|
||||||
|
* 2.1.watch进行监听配置，然后生成 配置表格的数据，再调用setResultColumns来更新表格
|
||||||
|
* 2.2.将columns根据配置转换成resultColumns进行渲染表格
|
||||||
|
*
|
||||||
|
* 3.修改配置触发changeSetting来对配置进行更新，更新后watch会监听到跳转2如此循环
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'JTable',
|
||||||
|
props: {
|
||||||
|
tableKey: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 配置表的样式
|
||||||
|
settingStyle: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: () => ({ width: '300px' })
|
||||||
|
},
|
||||||
|
// 配置表的scroll
|
||||||
|
settingScroll: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: () => ({ y: 300 })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 设置表格
|
||||||
|
settingColumns: [
|
||||||
|
{ title: '列名', dataIndex: 'title', align: 'center', ellipsis: true, width: 150 },
|
||||||
|
{ title: '隐藏', dataIndex: 'hide', align: 'center', ellipsis: true, width: 60, scopedSlots: { customRender: 'hide' } },
|
||||||
|
{ title: '冻结', dataIndex: 'freeze', align: 'center', ellipsis: true, width: 60, scopedSlots: { customRender: 'freeze' } }
|
||||||
|
],
|
||||||
|
settingDataSource: [],
|
||||||
|
settingColumnsObj: { hide: [], freeze: [] }, // 本地存储的配置对象
|
||||||
|
resultColumns: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
slots () {
|
||||||
|
const slots = []
|
||||||
|
for (const column of this.columns) {
|
||||||
|
if (column.scopedSlots && column.scopedSlots.customRender) {
|
||||||
|
slots.push(column.scopedSlots.customRender)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return slots
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 配置列改变，将配置转换成配置表格数据
|
||||||
|
settingColumnsObj: {
|
||||||
|
deep: true, // 深度监听
|
||||||
|
immediate: true, // 挂载先执行一次
|
||||||
|
handler () {
|
||||||
|
const dataSource = []
|
||||||
|
this.columns.forEach(col => {
|
||||||
|
const tempKey = getKey(col)
|
||||||
|
// 操作栏不可配置
|
||||||
|
if (tempKey === actionKey) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// hideSettingColumn: true 可以让不显示字段控制
|
||||||
|
if (col.hideSettingColumn) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
dataSource.push({
|
||||||
|
title: col.title, // 用于显示的字段
|
||||||
|
key: tempKey, // 用于存储的字段
|
||||||
|
hide: this.settingColumnsObj.hide.includes(tempKey), // 是否隐藏
|
||||||
|
freeze: this.settingColumnsObj.freeze.includes(tempKey), // 是否冻结
|
||||||
|
disabledHide: col.disabledHide, // 禁用隐藏
|
||||||
|
disabledFreeze: col.disabledFreeze // 禁用冻结
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.settingDataSource = dataSource
|
||||||
|
this.setResultColumns()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 将父组件的columns进行处理：增加设置列按钮
|
||||||
|
* 冻结列要有width，否则会有问题，建议使用minWidth，scroll.x要大于所有列width的和
|
||||||
|
*/
|
||||||
|
setResultColumns () {
|
||||||
|
// 深度克隆，防止直接修改父组件数据
|
||||||
|
const columns = cloneDeep(this.columns)
|
||||||
|
// 设置按钮插槽配置
|
||||||
|
const settingOption = {
|
||||||
|
scopedSlots: {
|
||||||
|
filterDropdown: 'settingDropdown',
|
||||||
|
filterIcon: 'settingIcon',
|
||||||
|
customRender: 'action'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey))
|
||||||
|
// 如果找到操作栏，就把设置加到操作栏上
|
||||||
|
if (findActionIndex !== -1) {
|
||||||
|
// 添加设置插槽配置，并固定右侧
|
||||||
|
Object.assign(columns[findActionIndex], settingOption, { fixed: 'right' })
|
||||||
|
} else {
|
||||||
|
// 如果没有找到操作栏，就把最后列加上设置插槽配置
|
||||||
|
Object.assign(columns[columns.length - 1], settingOption)
|
||||||
|
}
|
||||||
|
// 最后过滤掉需要隐藏的字段,按定位进行排序
|
||||||
|
const startArr = [] // 冻结左侧的列
|
||||||
|
const midArr = [] // 没有冻结的列
|
||||||
|
const endArr = [] // 冻结右侧的列(只能是action，暂时不能自定义固定右侧)
|
||||||
|
columns.forEach(col => {
|
||||||
|
const key = getKey(col)
|
||||||
|
const fixed = this.settingColumnsObj.freeze.includes(key)
|
||||||
|
col.hide = this.settingColumnsObj.hide.includes(key)
|
||||||
|
col.fixed = key === actionKey ? 'right' : fixed
|
||||||
|
if (!col.hide) {
|
||||||
|
// 如果没有宽度就取minWidth（不添加原数据的width属性，这里只对需要固定的minWidth生效）
|
||||||
|
const minWidth = col.width || col.minWidth
|
||||||
|
switch (col.fixed) {
|
||||||
|
case true:
|
||||||
|
case 'left':
|
||||||
|
startArr.push({ ...col, width: minWidth })
|
||||||
|
break
|
||||||
|
case 'right':
|
||||||
|
endArr.push({ ...col, width: minWidth })
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
midArr.push(col)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 更新父组件的数据，将排序后的进行渲染
|
||||||
|
this.$emit('update:columns', columns)
|
||||||
|
this.resultColumns = [...startArr, ...midArr, ...endArr]
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 配置表中复选框改变状态的事件
|
||||||
|
* @param text 修改前的状态
|
||||||
|
* @param type 隐藏还是冻结
|
||||||
|
* @param record 当前行数据
|
||||||
|
*/
|
||||||
|
changeSetting (text, type, record) {
|
||||||
|
const checked = !text // text是点击前的状态，取反就是要修改的状态
|
||||||
|
console.log('修改了配置', checked, type, record)
|
||||||
|
// 修改当前行配置
|
||||||
|
record[type] = !checked
|
||||||
|
// 勾选就添加，取消就删除
|
||||||
|
if (checked) {
|
||||||
|
this.settingColumnsObj[type].push(record.key)
|
||||||
|
} else {
|
||||||
|
this.settingColumnsObj[type].splice(this.settingColumnsObj[type].findIndex(item => item === record.key), 1)
|
||||||
|
}
|
||||||
|
this.saveSetting()
|
||||||
|
/**
|
||||||
|
* 弹框消失问题 冻结列会导致dom结构改变而从局部更新丢失弹框
|
||||||
|
* 情况1：原本显示没有冻结列，新增第一个冻结列
|
||||||
|
* 情况2：原本有且只剩一个冻结列，取消最后一个冻结列
|
||||||
|
* 解决方案，刷新前获取dom，刷新后再次获取，如果获取不一致就触发点击事件点开弹框
|
||||||
|
*/
|
||||||
|
const beforeIsFixed = !!this.$refs.table.$el.querySelector('.ant-table-fixed-left')
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const afterIsFixed = !!this.$refs.table.$el.querySelector('.ant-table-fixed-left')
|
||||||
|
// console.log(beforeIsFixed, afterIsFixed)
|
||||||
|
if (beforeIsFixed !== afterIsFixed) {
|
||||||
|
this.$refs.settingBtn.$el.click()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 初始化配置，从columns里获取
|
||||||
|
initSetting () {
|
||||||
|
const hide = []
|
||||||
|
const freeze = []
|
||||||
|
this.columns.forEach(col => {
|
||||||
|
const key = getKey(col)
|
||||||
|
// hide属性控制隐藏
|
||||||
|
if (col.hide) {
|
||||||
|
hide.push(key)
|
||||||
|
}
|
||||||
|
// fixed冻结到左侧
|
||||||
|
if (col.fixed === true || col.fixed === 'left') {
|
||||||
|
freeze.push(key)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.settingColumnsObj = { hide, freeze }
|
||||||
|
this.saveSetting()
|
||||||
|
},
|
||||||
|
// 配置保存到本地
|
||||||
|
saveSetting () {
|
||||||
|
// 获取所有的jtable缓存的key数组（用于清除缓存，没有就初始化数组）
|
||||||
|
const jTableKeys = Vue.ls.get(J_TABLE_KEYS) || []
|
||||||
|
const saveKey = this.tableKey + saveSuffix
|
||||||
|
// 如果不在数组里面就追加进去
|
||||||
|
if (!jTableKeys.includes(saveKey)) {
|
||||||
|
jTableKeys.push(saveKey)
|
||||||
|
}
|
||||||
|
Vue.ls.set(J_TABLE_KEYS, jTableKeys, 7 * 24 * 60 * 60 * 10)
|
||||||
|
Vue.ls.set(saveKey, this.settingColumnsObj, 7 * 24 * 60 * 60 * 10)
|
||||||
|
},
|
||||||
|
// 清除本地的配置(当前的JTable)
|
||||||
|
clearSetting () {
|
||||||
|
this.settingColumnsObj = { hide: [], freeze: [] }
|
||||||
|
Vue.ls.remove(this.tableKey + saveSuffix)
|
||||||
|
this.$message.success('成功清除当前JTable的缓存!')
|
||||||
|
},
|
||||||
|
// 清除所有缓存
|
||||||
|
clearAllCacheSetting () {
|
||||||
|
// 获取到之后遍历删除，最后把keys数组删除
|
||||||
|
const jTableKeys = Vue.ls.get(J_TABLE_KEYS)
|
||||||
|
jTableKeys && jTableKeys.forEach(key => {
|
||||||
|
Vue.ls.remove(key)
|
||||||
|
})
|
||||||
|
Vue.ls.remove(J_TABLE_KEYS)
|
||||||
|
this.$message.success('成功清除全局JTable的缓存!')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const settingColumnsObj = Vue.ls.get(this.tableKey + saveSuffix)
|
||||||
|
// 第一次进页面或清空缓存进行初始化
|
||||||
|
if (settingColumnsObj) {
|
||||||
|
this.settingColumnsObj = settingColumnsObj
|
||||||
|
} else {
|
||||||
|
this.initSetting()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='less' scoped>
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user