github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 15:41:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix table column settings not displayed by setting

Browse Source
This commit is contained in:
vben
2020-11-28 19:15:06 +08:00
parent de499a1455
commit 54d1405646
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Table/src/components/TableSetting.vue
View File

@@ -77,7 +77,7 @@
</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 {
@@ -132,7 +132,7 @@
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,
@@ -142,6 +142,12 @@
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) => {
@@ -150,7 +156,8 @@
value: (item.dataIndex || item.title) as string,
});
});
plainOptions = ret;
plainOptions.value = ret;
const checkList = table
.getColumns()
.map((item) => item.dataIndex || item.title) as string[];
@@ -171,7 +178,7 @@
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);
@@ -182,8 +189,9 @@
}
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);
}
@@ -207,7 +215,6 @@
}
);
init();
return {
redo: () => table.reload(),
handleTitleClick,