| | |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, ref, reactive, toRefs, PropType, computed } from 'vue'; |
| | | import { defineComponent, ref, reactive, toRefs, PropType, computed, watchEffect } from 'vue'; |
| | | import { injectTable } from '../hooks/useProvinceTable'; |
| | | import { Tooltip, Divider, Dropdown, Menu, Popover, Checkbox } from 'ant-design-vue'; |
| | | import { |
| | |
| | | const { toggleFullscreen, isFullscreenRef } = useFullscreen(table.wrapRef); |
| | | const selectedKeysRef = ref<SizeType[]>([table.getSize()]); |
| | | |
| | | let plainOptions: Options[] = []; |
| | | const plainOptions = ref<Options[]>([]); |
| | | const state = reactive<State>({ |
| | | indeterminate: false, |
| | | checkAll: true, |
| | |
| | | |
| | | const { t } = useI18n('component.table'); |
| | | |
| | | watchEffect(() => { |
| | | const columns = table.getColumns(); |
| | | if (columns.length) { |
| | | init(); |
| | | } |
| | | }); |
| | | function init() { |
| | | let ret: Options[] = []; |
| | | table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => { |
| | |
| | | value: (item.dataIndex || item.title) as string, |
| | | }); |
| | | }); |
| | | plainOptions = ret; |
| | | |
| | | plainOptions.value = ret; |
| | | const checkList = table |
| | | .getColumns() |
| | | .map((item) => item.dataIndex || item.title) as string[]; |
| | |
| | | |
| | | function onCheckAllChange(e: ChangeEvent) { |
| | | state.indeterminate = false; |
| | | const checkList = plainOptions.map((item) => item.value); |
| | | const checkList = plainOptions.value.map((item) => item.value); |
| | | if (e.target.checked) { |
| | | state.checkedList = checkList; |
| | | table.setColumns(checkList); |
| | |
| | | } |
| | | |
| | | function onChange(checkedList: string[]) { |
| | | state.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length; |
| | | state.checkAll = checkedList.length === plainOptions.length; |
| | | const len = plainOptions.value.length; |
| | | state.indeterminate = !!checkedList.length && checkedList.length < len; |
| | | state.checkAll = checkedList.length === len; |
| | | table.setColumns(checkedList); |
| | | } |
| | | |
| | |
| | | } |
| | | ); |
| | | |
| | | init(); |
| | | return { |
| | | redo: () => table.reload(), |
| | | handleTitleClick, |