@ -43,7 +43,7 @@
< CheckboxGroup v -model :value ="checkedList" @change ="onChange" ref = "columnListRef" >
< CheckboxGroup v -model :value ="checkedList" @change ="onChange" ref = "columnListRef" >
< template v-for ="item in plainOptions" :key="item.value" >
< template v-for ="item in plainOptions" :key="item.value" >
< div :class ="`${prefixCls}__check-item`" v-if ="!('ifShow' in item && !item.ifShow)" >
< div :class ="`${prefixCls}__check-item`" v-if ="!('ifShow' in item && !item.ifShow)" >
< DragOutlined class = "table-cou lmn-drag-icon" / >
< DragOutlined class = "table-colu mn-drag-icon" / >
< Checkbox :value ="item.value" >
< Checkbox :value ="item.value" >
{ { item . label } }
{ { item . label } }
< / Checkbox >
< / Checkbox >
@ -120,7 +120,7 @@
import { useSortable } from '/@/hooks/web/useSortable' ;
import { useSortable } from '/@/hooks/web/useSortable' ;
import { isFunction , isNullAndUnDef } from '/@/utils/is' ;
import { isFunction , isNullAndUnDef } from '/@/utils/is' ;
import { getPopupContainer as getParentContainer } from '/@/utils' ;
import { getPopupContainer as getParentContainer } from '/@/utils' ;
import { omit } from 'lodash-es' ;
import { cloneDeep , omit } from 'lodash-es' ;
interface State {
interface State {
checkAll : boolean ;
checkAll : boolean ;
@ -250,16 +250,15 @@
const indeterminate = computed ( ( ) => {
const indeterminate = computed ( ( ) => {
const len = plainOptions . value . length ;
const len = plainOptions . value . length ;
let checkd edLen = state . checkedList . length ;
let checkedLen = state . checkedList . length ;
unref ( checkIndex ) && checkd edLen -- ;
unref ( checkIndex ) && checkedLen -- ;
return checkd edLen > 0 && checkd edLen < len ;
return checkedLen > 0 && checkedLen < len ;
} ) ;
} ) ;
/ / T r i g g e r w h e n c h e c k / u n c h e c k a c o l u m n
/ / T r i g g e r w h e n c h e c k / u n c h e c k a c o l u m n
function onChange ( checkedList : string [ ] ) {
function onChange ( checkedList : string [ ] ) {
const len = plainOptions . value . length ;
const len = plainSort Options . value . length ;
state . checkAll = checkedList . length === len ;
state . checkAll = checkedList . length === len ;
const sortList = unref ( plainSortOptions ) . map ( ( item ) => item . value ) ;
const sortList = unref ( plainSortOptions ) . map ( ( item ) => item . value ) ;
checkedList . sort ( ( prev , next ) => {
checkedList . sort ( ( prev , next ) => {
return sortList . indexOf ( prev ) - sortList . indexOf ( next ) ;
return sortList . indexOf ( prev ) - sortList . indexOf ( next ) ;
@ -286,14 +285,14 @@
if ( ! el ) return ;
if ( ! el ) return ;
/ / D r a g a n d d r o p s o r t
/ / D r a g a n d d r o p s o r t
const { initSortable } = useSortable ( el , {
const { initSortable } = useSortable ( el , {
handle : '.table-cou lmn-drag-icon ' ,
handle : '.table-colu mn-drag-icon' ,
onEnd : ( evt ) => {
onEnd : ( evt ) => {
const { oldIndex , newIndex } = evt ;
const { oldIndex , newIndex } = evt ;
if ( isNullAndUnDef ( oldIndex ) || isNullAndUnDef ( newIndex ) || oldIndex === newIndex ) {
if ( isNullAndUnDef ( oldIndex ) || isNullAndUnDef ( newIndex ) || oldIndex === newIndex ) {
return ;
return ;
}
}
/ / S o r t c o l u m n
/ / S o r t c o l u m n
const columns = getColumns ( ) ;
const columns = cloneDeep ( plainSortOptions . value ) ;
if ( oldIndex > newIndex ) {
if ( oldIndex > newIndex ) {
columns . splice ( newIndex , 0 , columns [ oldIndex ] ) ;
columns . splice ( newIndex , 0 , columns [ oldIndex ] ) ;
@ -304,7 +303,6 @@
}
}
plainSortOptions . value = columns ;
plainSortOptions . value = columns ;
plainOptions . value = columns ;
setColumns ( columns ) ;
setColumns ( columns ) ;
} ,
} ,
} ) ;
} ) ;
@ -347,7 +345,7 @@
function setColumns ( columns : BasicColumn [ ] | string [ ] ) {
function setColumns ( columns : BasicColumn [ ] | string [ ] ) {
table . setColumns ( columns ) ;
table . setColumns ( columns ) ;
const data : ColumnChangeParam [ ] = unref ( plainOptions ) . map ( ( col ) => {
const data : ColumnChangeParam [ ] = unref ( plainSort Options ) . map ( ( col ) => {
const visible =
const visible =
columns . findIndex (
columns . findIndex (
( c : BasicColumn | string ) =>
( c : BasicColumn | string ) =>
@ -390,7 +388,7 @@
< style lang = "less" >
< style lang = "less" >
@ prefix - cls : ~ '@{namespace}-basic-column-setting' ;
@ prefix - cls : ~ '@{namespace}-basic-column-setting' ;
. table - cou lmn - drag - icon {
. table - colu mn - drag - icon {
margin : 0 5 px ;
margin : 0 5 px ;
cursor : move ;
cursor : move ;
}
}