|
@@ -43,7 +43,7 @@
|
|
|
<CheckboxGroup v-model:value="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-coulmn-drag-icon" />
|
|
|
+ <DragOutlined class="table-column-drag-icon" />
|
|
|
<Checkbox :value="item.value">
|
|
|
{{ item.label }}
|
|
|
</Checkbox>
|
|
@@ -120,7 +120,7 @@
|
|
|
import { useSortable } from '/@/hooks/web/useSortable';
|
|
|
import { isFunction, isNullAndUnDef } from '/@/utils/is';
|
|
|
import { getPopupContainer as getParentContainer } from '/@/utils';
|
|
|
- import { omit } from 'lodash-es';
|
|
|
+ import { cloneDeep, omit } from 'lodash-es';
|
|
|
|
|
|
interface State {
|
|
|
checkAll: boolean;
|
|
@@ -250,16 +250,15 @@
|
|
|
|
|
|
const indeterminate = computed(() => {
|
|
|
const len = plainOptions.value.length;
|
|
|
- let checkdedLen = state.checkedList.length;
|
|
|
- unref(checkIndex) && checkdedLen--;
|
|
|
- return checkdedLen > 0 && checkdedLen < len;
|
|
|
+ let checkedLen = state.checkedList.length;
|
|
|
+ unref(checkIndex) && checkedLen--;
|
|
|
+ return checkedLen > 0 && checkedLen < len;
|
|
|
});
|
|
|
|
|
|
// Trigger when check/uncheck a column
|
|
|
function onChange(checkedList: string[]) {
|
|
|
- const len = plainOptions.value.length;
|
|
|
+ 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);
|
|
@@ -286,14 +285,14 @@
|
|
|
if (!el) return;
|
|
|
// Drag and drop sort
|
|
|
const { initSortable } = useSortable(el, {
|
|
|
- handle: '.table-coulmn-drag-icon ',
|
|
|
+ handle: '.table-column-drag-icon',
|
|
|
onEnd: (evt) => {
|
|
|
const { oldIndex, newIndex } = evt;
|
|
|
if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
|
|
|
return;
|
|
|
}
|
|
|
// Sort column
|
|
|
- const columns = getColumns();
|
|
|
+ const columns = cloneDeep(plainSortOptions.value);
|
|
|
|
|
|
if (oldIndex > newIndex) {
|
|
|
columns.splice(newIndex, 0, columns[oldIndex]);
|
|
@@ -304,7 +303,6 @@
|
|
|
}
|
|
|
|
|
|
plainSortOptions.value = columns;
|
|
|
- plainOptions.value = columns;
|
|
|
setColumns(columns);
|
|
|
},
|
|
|
});
|
|
@@ -347,7 +345,7 @@
|
|
|
|
|
|
function setColumns(columns: BasicColumn[] | string[]) {
|
|
|
table.setColumns(columns);
|
|
|
- const data: ColumnChangeParam[] = unref(plainOptions).map((col) => {
|
|
|
+ const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => {
|
|
|
const visible =
|
|
|
columns.findIndex(
|
|
|
(c: BasicColumn | string) =>
|
|
@@ -390,7 +388,7 @@
|
|
|
<style lang="less">
|
|
|
@prefix-cls: ~'@{namespace}-basic-column-setting';
|
|
|
|
|
|
- .table-coulmn-drag-icon {
|
|
|
+ .table-column-drag-icon {
|
|
|
margin: 0 5px;
|
|
|
cursor: move;
|
|
|
}
|