luojiaquan
75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<template>
|
|
<el-popover :width="240" placement="bottom-end" trigger="click" popper-class="column-settings-popper">
|
|
<template #reference>
|
|
<el-button circle plain icon="Operation" title="列设置" />
|
|
</template>
|
|
<div class="column-settings">
|
|
<div class="column-settings__header">
|
|
<span class="column-settings__title">列展示设置</span>
|
|
<el-button link type="primary" size="small" @click="emit('reset')">恢复默认</el-button>
|
|
</div>
|
|
<el-checkbox-group :model-value="checkedKeys" @change="onChange" class="column-settings__body">
|
|
<el-checkbox
|
|
v-for="c in columns"
|
|
:key="c.key"
|
|
:value="c.key"
|
|
:disabled="c.fixed"
|
|
>{{ c.label }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
|
|
<script setup name="ColumnSettings">
|
|
/**
|
|
* 表格列设置弹窗（与 useColumnSettings 配合）：
|
|
* <column-settings :columns="columnDefs" :visible-map="colVisible" @toggle="toggleColumn" @reset="resetColumns" />
|
|
* 注意：reference 不要嵌套 el-tooltip——两个 popper 组件嵌套会导致引用解析异常。
|
|
*/
|
|
const props = defineProps({
|
|
columns: { type: Array, default: () => [] },
|
|
visibleMap: { type: Object, required: true }
|
|
})
|
|
const emit = defineEmits(['toggle', 'reset'])
|
|
|
|
const checkedKeys = computed(() =>
|
|
props.columns.filter(c => props.visibleMap[c.key] !== false).map(c => c.key)
|
|
)
|
|
|
|
/** el-checkbox-group 回传当前全量勾选值，逐列 diff 后通知父级修改 */
|
|
function onChange(keys) {
|
|
props.columns.forEach(c => {
|
|
if (c.fixed) return
|
|
const next = keys.includes(c.key)
|
|
if ((props.visibleMap[c.key] !== false) !== next) {
|
|
emit('toggle', c.key, next)
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.column-settings__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|
}
|
|
.column-settings__title {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
.column-settings__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
}
|
|
.column-settings__body :deep(.el-checkbox) {
|
|
margin-right: 0;
|
|
height: 28px;
|
|
}
|
|
</style>
|