|
|
|
@ -14,7 +14,7 @@ |
|
|
|
<div :class="`${prefixCls}__popover-title`"> |
|
|
|
<Checkbox |
|
|
|
:indeterminate="indeterminate" |
|
|
|
v-model:checked="checkAll" |
|
|
|
v-model:checked="state.checkAll" |
|
|
|
@change="onCheckAllChange" |
|
|
|
> |
|
|
|
{{ t('component.table.settingColumnShow') }} |
|
|
|
@ -44,7 +44,7 @@ |
|
|
|
|
|
|
|
<template #content> |
|
|
|
<ScrollContainer> |
|
|
|
<CheckboxGroup v-model:value="checkedList" @change="onChange" ref="columnListRef"> |
|
|
|
<CheckboxGroup v-model:value="state.checkedList" @change="onChange" ref="columnListRef"> |
|
|
|
<template v-for="item in plainOptions" :key="item.value"> |
|
|
|
<div :class="`${prefixCls}__check-item`" v-if="!('ifShow' in item && !item.ifShow)"> |
|
|
|
<DragOutlined class="table-column-drag-icon" /> |
|
|
|
@ -66,7 +66,7 @@ |
|
|
|
`${prefixCls}__fixed-left`, |
|
|
|
{ |
|
|
|
active: item.fixed === 'left', |
|
|
|
disabled: !checkedList.includes(item.value), |
|
|
|
disabled: !state.checkedList.includes(item.value), |
|
|
|
}, |
|
|
|
]" |
|
|
|
@click="handleColumnFixed(item, 'left')" |
|
|
|
@ -87,7 +87,7 @@ |
|
|
|
`${prefixCls}__fixed-right`, |
|
|
|
{ |
|
|
|
active: item.fixed === 'right', |
|
|
|
disabled: !checkedList.includes(item.value), |
|
|
|
disabled: !state.checkedList.includes(item.value), |
|
|
|
}, |
|
|
|
]" |
|
|
|
@click="handleColumnFixed(item, 'right')" |
|
|
|
@ -102,13 +102,12 @@ |
|
|
|
</Popover> |
|
|
|
</Tooltip> |
|
|
|
</template> |
|
|
|
<script lang="ts"> |
|
|
|
<script lang="ts" setup> |
|
|
|
import type { BasicColumn, ColumnChangeParam } from '../../types/table'; |
|
|
|
import { |
|
|
|
defineComponent, |
|
|
|
useAttrs, |
|
|
|
ref, |
|
|
|
reactive, |
|
|
|
toRefs, |
|
|
|
watchEffect, |
|
|
|
nextTick, |
|
|
|
unref, |
|
|
|
@ -142,285 +141,249 @@ |
|
|
|
fixed?: boolean | 'left' | 'right'; |
|
|
|
} |
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
name: 'ColumnSetting', |
|
|
|
components: { |
|
|
|
SettingOutlined, |
|
|
|
Popover, |
|
|
|
Tooltip, |
|
|
|
Checkbox, |
|
|
|
CheckboxGroup: Checkbox.Group, |
|
|
|
DragOutlined, |
|
|
|
ScrollContainer, |
|
|
|
Divider, |
|
|
|
Icon, |
|
|
|
}, |
|
|
|
emits: ['columns-change'], |
|
|
|
|
|
|
|
setup(_, { emit, attrs }) { |
|
|
|
const { t } = useI18n(); |
|
|
|
const table = useTableContext(); |
|
|
|
|
|
|
|
const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys'); |
|
|
|
let inited = false; |
|
|
|
|
|
|
|
const cachePlainOptions = ref<Options[]>([]); |
|
|
|
const plainOptions = ref<Options[] | any>([]); |
|
|
|
|
|
|
|
const plainSortOptions = ref<Options[]>([]); |
|
|
|
|
|
|
|
const columnListRef = ref<ComponentRef>(null); |
|
|
|
|
|
|
|
const state = reactive<State>({ |
|
|
|
checkAll: true, |
|
|
|
checkedList: [], |
|
|
|
defaultCheckList: [], |
|
|
|
}); |
|
|
|
const CheckboxGroup = Checkbox.Group; |
|
|
|
const emits = defineEmits(['columns-change']); |
|
|
|
|
|
|
|
const checkIndex = ref(false); |
|
|
|
const checkSelect = ref(false); |
|
|
|
const checkDrag = ref(false); |
|
|
|
const { t } = useI18n(); |
|
|
|
const table = useTableContext(); |
|
|
|
|
|
|
|
const { prefixCls } = useDesign('basic-column-setting'); |
|
|
|
const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys'); |
|
|
|
let inited = false; |
|
|
|
|
|
|
|
const getValues = computed(() => { |
|
|
|
return unref(table?.getBindValues) || {}; |
|
|
|
}); |
|
|
|
const cachePlainOptions = ref<Options[]>([]); |
|
|
|
const plainOptions = ref<Options[] | any>([]); |
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
setTimeout(() => { |
|
|
|
const columns = table.getColumns(); |
|
|
|
if (columns.length && !state.isInit) { |
|
|
|
init(); |
|
|
|
} |
|
|
|
}, 10); |
|
|
|
}); |
|
|
|
const plainSortOptions = ref<Options[]>([]); |
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
const values = unref(getValues); |
|
|
|
checkIndex.value = !!values.showIndexColumn; |
|
|
|
checkSelect.value = !!values.rowSelection; |
|
|
|
}); |
|
|
|
const columnListRef = ref<ComponentRef>(null); |
|
|
|
|
|
|
|
function getColumns() { |
|
|
|
const ret: Options[] = []; |
|
|
|
table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => { |
|
|
|
ret.push({ |
|
|
|
label: (item.title as string) || (item.customTitle as string), |
|
|
|
value: (item.dataIndex || item.title) as string, |
|
|
|
...item, |
|
|
|
}); |
|
|
|
}); |
|
|
|
return ret; |
|
|
|
} |
|
|
|
const state = reactive<State>({ |
|
|
|
checkAll: true, |
|
|
|
checkedList: [], |
|
|
|
defaultCheckList: [], |
|
|
|
}); |
|
|
|
|
|
|
|
function init() { |
|
|
|
const columns = getColumns(); |
|
|
|
|
|
|
|
const checkList = table |
|
|
|
.getColumns({ ignoreAction: true }) |
|
|
|
.map((item) => { |
|
|
|
if (item.defaultHidden) { |
|
|
|
return ''; |
|
|
|
} |
|
|
|
return item.dataIndex || item.title; |
|
|
|
}) |
|
|
|
.filter(Boolean) as string[]; |
|
|
|
|
|
|
|
if (!plainOptions.value.length) { |
|
|
|
plainOptions.value = columns; |
|
|
|
plainSortOptions.value = columns; |
|
|
|
cachePlainOptions.value = columns; |
|
|
|
state.defaultCheckList = checkList; |
|
|
|
} else { |
|
|
|
// const fixedColumns = columns.filter((item) => |
|
|
|
// Reflect.has(item, 'fixed') |
|
|
|
// ) as BasicColumn[]; |
|
|
|
|
|
|
|
unref(plainOptions).forEach((item: BasicColumn) => { |
|
|
|
const findItem = columns.find((col: BasicColumn) => col.dataIndex === item.dataIndex); |
|
|
|
if (findItem) { |
|
|
|
item.fixed = findItem.fixed; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
state.isInit = true; |
|
|
|
state.checkedList = checkList; |
|
|
|
} |
|
|
|
const checkIndex = ref(false); |
|
|
|
const checkSelect = ref(false); |
|
|
|
const checkDrag = ref(false); |
|
|
|
|
|
|
|
// checkAll change |
|
|
|
function onCheckAllChange(e: CheckboxChangeEvent) { |
|
|
|
const checkList = plainOptions.value.map((item) => item.value); |
|
|
|
if (e.target.checked) { |
|
|
|
state.checkedList = checkList; |
|
|
|
setColumns(checkList); |
|
|
|
} else { |
|
|
|
state.checkedList = []; |
|
|
|
setColumns([]); |
|
|
|
} |
|
|
|
const { prefixCls } = useDesign('basic-column-setting'); |
|
|
|
|
|
|
|
const getValues = computed(() => { |
|
|
|
return unref(table?.getBindValues) || {}; |
|
|
|
}); |
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
setTimeout(() => { |
|
|
|
const columns = table.getColumns(); |
|
|
|
if (columns.length && !state.isInit) { |
|
|
|
init(); |
|
|
|
} |
|
|
|
}, 10); |
|
|
|
}); |
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
const values = unref(getValues); |
|
|
|
checkIndex.value = !!values.showIndexColumn; |
|
|
|
checkSelect.value = !!values.rowSelection; |
|
|
|
}); |
|
|
|
|
|
|
|
const indeterminate = computed(() => { |
|
|
|
const len = plainOptions.value.length; |
|
|
|
let checkedLen = state.checkedList.length; |
|
|
|
unref(checkIndex) && checkedLen--; |
|
|
|
return checkedLen > 0 && checkedLen < len; |
|
|
|
function getColumns() { |
|
|
|
const ret: Options[] = []; |
|
|
|
table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => { |
|
|
|
ret.push({ |
|
|
|
label: (item.title as string) || (item.customTitle as string), |
|
|
|
value: (item.dataIndex || item.title) as string, |
|
|
|
...item, |
|
|
|
}); |
|
|
|
}); |
|
|
|
return ret; |
|
|
|
} |
|
|
|
|
|
|
|
// Trigger when check/uncheck a column |
|
|
|
function onChange(checkedList: string[]) { |
|
|
|
const len = plainSortOptions.value.length; |
|
|
|
state.checkAll = checkedList.length === len; |
|
|
|
const sortList = unref(plainSortOptions).map((item) => item.value); |
|
|
|
checkedList.sort((prev, next) => { |
|
|
|
return sortList.indexOf(prev) - sortList.indexOf(next); |
|
|
|
}); |
|
|
|
setColumns(checkedList); |
|
|
|
} |
|
|
|
function init() { |
|
|
|
const columns = getColumns(); |
|
|
|
|
|
|
|
let sortable: Sortable; |
|
|
|
let sortableOrder: string[] = []; |
|
|
|
// reset columns |
|
|
|
function reset() { |
|
|
|
state.checkedList = [...state.defaultCheckList]; |
|
|
|
state.checkAll = true; |
|
|
|
plainOptions.value = unref(cachePlainOptions); |
|
|
|
plainSortOptions.value = unref(cachePlainOptions); |
|
|
|
setColumns(table.getCacheColumns()); |
|
|
|
sortable.sort(sortableOrder); |
|
|
|
} |
|
|
|
const checkList = table |
|
|
|
.getColumns({ ignoreAction: true, ignoreIndex: true }) |
|
|
|
.map((item) => { |
|
|
|
if (item.defaultHidden) { |
|
|
|
return ''; |
|
|
|
} |
|
|
|
return item.dataIndex || item.title; |
|
|
|
}) |
|
|
|
.filter(Boolean) as string[]; |
|
|
|
|
|
|
|
if (!plainOptions.value.length) { |
|
|
|
plainOptions.value = columns; |
|
|
|
plainSortOptions.value = columns; |
|
|
|
cachePlainOptions.value = columns; |
|
|
|
state.defaultCheckList = checkList; |
|
|
|
} else { |
|
|
|
// const fixedColumns = columns.filter((item) => |
|
|
|
// Reflect.has(item, 'fixed') |
|
|
|
// ) as BasicColumn[]; |
|
|
|
|
|
|
|
unref(plainOptions).forEach((item: BasicColumn) => { |
|
|
|
const findItem = columns.find((col: BasicColumn) => col.dataIndex === item.dataIndex); |
|
|
|
if (findItem) { |
|
|
|
item.fixed = findItem.fixed; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
state.isInit = true; |
|
|
|
state.checkedList = checkList; |
|
|
|
} |
|
|
|
|
|
|
|
// Open the pop-up window for drag and drop initialization |
|
|
|
function handleVisibleChange() { |
|
|
|
if (inited) return; |
|
|
|
nextTick(() => { |
|
|
|
const columnListEl = unref(columnListRef); |
|
|
|
if (!columnListEl) return; |
|
|
|
const el = columnListEl.$el as any; |
|
|
|
if (!el) return; |
|
|
|
// Drag and drop sort |
|
|
|
sortable = Sortablejs.create(unref(el), { |
|
|
|
animation: 500, |
|
|
|
delay: 400, |
|
|
|
delayOnTouchOnly: true, |
|
|
|
handle: '.table-column-drag-icon ', |
|
|
|
onEnd: (evt) => { |
|
|
|
const { oldIndex, newIndex } = evt; |
|
|
|
if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) { |
|
|
|
return; |
|
|
|
} |
|
|
|
// Sort column |
|
|
|
const columns = cloneDeep(plainSortOptions.value); |
|
|
|
|
|
|
|
if (oldIndex > newIndex) { |
|
|
|
columns.splice(newIndex, 0, columns[oldIndex]); |
|
|
|
columns.splice(oldIndex + 1, 1); |
|
|
|
} else { |
|
|
|
columns.splice(newIndex + 1, 0, columns[oldIndex]); |
|
|
|
columns.splice(oldIndex, 1); |
|
|
|
} |
|
|
|
|
|
|
|
plainSortOptions.value = columns; |
|
|
|
// fix: 修复ColumnSetting中默认隐藏列拖拽排序错误的bug (#1931) |
|
|
|
// https://github.com/vbenjs/vue-vben-admin/commit/50468e9581c93e95df21447bec30b6148541c46b |
|
|
|
setColumns( |
|
|
|
columns |
|
|
|
.map((col: Options) => col.value) |
|
|
|
.filter((value: string) => state.checkedList.includes(value)), |
|
|
|
); |
|
|
|
}, |
|
|
|
}); |
|
|
|
// 记录原始order 序列 |
|
|
|
sortableOrder = sortable.toArray(); |
|
|
|
inited = true; |
|
|
|
}); |
|
|
|
} |
|
|
|
// checkAll change |
|
|
|
function onCheckAllChange(e: CheckboxChangeEvent) { |
|
|
|
const checkList = plainOptions.value.map((item) => item.value); |
|
|
|
if (e.target.checked) { |
|
|
|
state.checkedList = checkList; |
|
|
|
setColumns(checkList); |
|
|
|
} else { |
|
|
|
state.checkedList = []; |
|
|
|
setColumns([]); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// Control whether the serial number column is displayed |
|
|
|
function handleIndexCheckChange(e: CheckboxChangeEvent) { |
|
|
|
table.setProps({ |
|
|
|
showIndexColumn: e.target.checked, |
|
|
|
}); |
|
|
|
} |
|
|
|
const indeterminate = computed(() => { |
|
|
|
const len = plainOptions.value.length; |
|
|
|
let checkedLen = state.checkedList.length; |
|
|
|
unref(checkIndex) && checkedLen--; |
|
|
|
return checkedLen > 0 && checkedLen < len; |
|
|
|
}); |
|
|
|
|
|
|
|
// Control whether the check box is displayed |
|
|
|
function handleSelectCheckChange(e: CheckboxChangeEvent) { |
|
|
|
table.setProps({ |
|
|
|
rowSelection: e.target.checked ? defaultRowSelection : undefined, |
|
|
|
}); |
|
|
|
} |
|
|
|
// Trigger when check/uncheck a column |
|
|
|
function onChange(checkedList: string[]) { |
|
|
|
const len = plainSortOptions.value.length; |
|
|
|
state.checkAll = checkedList.length === len; |
|
|
|
const sortList = unref(plainSortOptions).map((item) => item.value); |
|
|
|
checkedList.sort((prev, next) => { |
|
|
|
return sortList.indexOf(prev) - sortList.indexOf(next); |
|
|
|
}); |
|
|
|
setColumns(checkedList); |
|
|
|
} |
|
|
|
|
|
|
|
function handleDragChange(e: CheckboxChangeEvent) { |
|
|
|
const columns = getColumns() as BasicColumn[]; |
|
|
|
columns.forEach((col) => { |
|
|
|
if (isNumber(col.width)) { |
|
|
|
col.resizable = e.target.checked; |
|
|
|
let sortable: Sortable; |
|
|
|
let sortableOrder: string[] = []; |
|
|
|
// reset columns |
|
|
|
function reset() { |
|
|
|
state.checkedList = [...state.defaultCheckList]; |
|
|
|
state.checkAll = true; |
|
|
|
plainOptions.value = unref(cachePlainOptions); |
|
|
|
plainSortOptions.value = unref(cachePlainOptions); |
|
|
|
setColumns(table.getCacheColumns()); |
|
|
|
sortable.sort(sortableOrder); |
|
|
|
} |
|
|
|
|
|
|
|
// Open the pop-up window for drag and drop initialization |
|
|
|
function handleVisibleChange() { |
|
|
|
if (inited) return; |
|
|
|
nextTick(() => { |
|
|
|
const columnListEl = unref(columnListRef); |
|
|
|
if (!columnListEl) return; |
|
|
|
const el = columnListEl.$el as any; |
|
|
|
if (!el) return; |
|
|
|
// Drag and drop sort |
|
|
|
sortable = Sortablejs.create(unref(el), { |
|
|
|
animation: 500, |
|
|
|
delay: 400, |
|
|
|
delayOnTouchOnly: true, |
|
|
|
handle: '.table-column-drag-icon ', |
|
|
|
onEnd: (evt) => { |
|
|
|
const { oldIndex, newIndex } = evt; |
|
|
|
if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) { |
|
|
|
return; |
|
|
|
} |
|
|
|
// Sort column |
|
|
|
const columns = cloneDeep(plainSortOptions.value); |
|
|
|
|
|
|
|
if (oldIndex > newIndex) { |
|
|
|
columns.splice(newIndex, 0, columns[oldIndex]); |
|
|
|
columns.splice(oldIndex + 1, 1); |
|
|
|
} else { |
|
|
|
columns.splice(newIndex + 1, 0, columns[oldIndex]); |
|
|
|
columns.splice(oldIndex, 1); |
|
|
|
} |
|
|
|
}); |
|
|
|
setColumns(columns); |
|
|
|
} |
|
|
|
|
|
|
|
function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') { |
|
|
|
if (!state.checkedList.includes(item.dataIndex as string)) return; |
|
|
|
plainSortOptions.value = columns; |
|
|
|
// fix: 修复ColumnSetting中默认隐藏列拖拽排序错误的bug (#1931) |
|
|
|
// https://github.com/vbenjs/vue-vben-admin/commit/50468e9581c93e95df21447bec30b6148541c46b |
|
|
|
setColumns( |
|
|
|
columns |
|
|
|
.map((col: Options) => col.value) |
|
|
|
.filter((value: string) => state.checkedList.includes(value)), |
|
|
|
); |
|
|
|
}, |
|
|
|
}); |
|
|
|
// 记录原始order 序列 |
|
|
|
sortableOrder = sortable.toArray(); |
|
|
|
inited = true; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
const columns = getColumns() as BasicColumn[]; |
|
|
|
const isFixed = item.fixed === fixed ? false : fixed; |
|
|
|
const index = columns.findIndex((col) => col.dataIndex === item.dataIndex); |
|
|
|
if (index !== -1) { |
|
|
|
columns[index].fixed = isFixed; |
|
|
|
} |
|
|
|
item.fixed = isFixed; |
|
|
|
// Control whether the serial number column is displayed |
|
|
|
function handleIndexCheckChange(e: CheckboxChangeEvent) { |
|
|
|
table.setProps({ |
|
|
|
showIndexColumn: e.target.checked, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if (isFixed && !item.width) { |
|
|
|
item.width = 100; |
|
|
|
} |
|
|
|
table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed }); |
|
|
|
setColumns(columns); |
|
|
|
} |
|
|
|
// Control whether the check box is displayed |
|
|
|
function handleSelectCheckChange(e: CheckboxChangeEvent) { |
|
|
|
table.setProps({ |
|
|
|
rowSelection: e.target.checked ? defaultRowSelection : undefined, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function setColumns(columns: BasicColumn[] | string[]) { |
|
|
|
table.setColumns(columns); |
|
|
|
const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => { |
|
|
|
const visible = |
|
|
|
columns.findIndex( |
|
|
|
(c: BasicColumn | string) => |
|
|
|
c === col.value || (typeof c !== 'string' && c.dataIndex === col.value), |
|
|
|
) !== -1; |
|
|
|
return { dataIndex: col.value, fixed: col.fixed, visible }; |
|
|
|
}); |
|
|
|
|
|
|
|
emit('columns-change', data); |
|
|
|
function handleDragChange(e: CheckboxChangeEvent) { |
|
|
|
const columns = getColumns() as BasicColumn[]; |
|
|
|
columns.forEach((col) => { |
|
|
|
if (isNumber(col.width)) { |
|
|
|
col.resizable = e.target.checked; |
|
|
|
} |
|
|
|
}); |
|
|
|
setColumns(columns); |
|
|
|
} |
|
|
|
|
|
|
|
function getPopupContainer() { |
|
|
|
return isFunction(attrs.getPopupContainer) |
|
|
|
? attrs.getPopupContainer() |
|
|
|
: getParentContainer(); |
|
|
|
} |
|
|
|
function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') { |
|
|
|
if (!state.checkedList.includes(item.dataIndex as string)) return; |
|
|
|
|
|
|
|
return { |
|
|
|
t, |
|
|
|
...toRefs(state), |
|
|
|
indeterminate, |
|
|
|
onCheckAllChange, |
|
|
|
onChange, |
|
|
|
plainOptions, |
|
|
|
reset, |
|
|
|
prefixCls, |
|
|
|
columnListRef, |
|
|
|
handleVisibleChange, |
|
|
|
checkIndex, |
|
|
|
checkSelect, |
|
|
|
checkDrag, |
|
|
|
handleIndexCheckChange, |
|
|
|
handleSelectCheckChange, |
|
|
|
handleDragChange, |
|
|
|
defaultRowSelection, |
|
|
|
handleColumnFixed, |
|
|
|
getPopupContainer, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}); |
|
|
|
const columns = getColumns() as BasicColumn[]; |
|
|
|
const isFixed = item.fixed === fixed ? false : fixed; |
|
|
|
const index = columns.findIndex((col) => col.dataIndex === item.dataIndex); |
|
|
|
if (index !== -1) { |
|
|
|
columns[index].fixed = isFixed; |
|
|
|
} |
|
|
|
item.fixed = isFixed; |
|
|
|
|
|
|
|
if (isFixed && !item.width) { |
|
|
|
item.width = 100; |
|
|
|
} |
|
|
|
table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed }); |
|
|
|
setColumns(columns); |
|
|
|
} |
|
|
|
|
|
|
|
function setColumns(columns: BasicColumn[] | string[]) { |
|
|
|
table.setColumns(columns); |
|
|
|
const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => { |
|
|
|
const visible = |
|
|
|
columns.findIndex( |
|
|
|
(c: BasicColumn | string) => |
|
|
|
c === col.value || (typeof c !== 'string' && c.dataIndex === col.value), |
|
|
|
) !== -1; |
|
|
|
return { dataIndex: col.value, fixed: col.fixed, visible }; |
|
|
|
}); |
|
|
|
|
|
|
|
emits('columns-change', data); |
|
|
|
} |
|
|
|
|
|
|
|
function getPopupContainer() { |
|
|
|
const attrs = useAttrs(); |
|
|
|
return isFunction(attrs.getPopupContainer) |
|
|
|
? attrs.getPopupContainer() |
|
|
|
: getParentContainer(); |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="less"> |
|
|
|
@prefix-cls: ~'@{namespace}-basic-column-setting'; |
|
|
|
|
cKey
3 years ago