fix: fix table column settings not displayed by setting

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

View File

@ -31,6 +31,8 @@
- form: 修复表单校验先设置在校验及控制台错误信息问题 - form: 修复表单校验先设置在校验及控制台错误信息问题
- `modal`&`drawer` 修复组件传递数组参数问题 - `modal`&`drawer` 修复组件传递数组参数问题
- form: 修复`updateSchema`赋值含有`[]`时不生效 - form: 修复`updateSchema`赋值含有`[]`时不生效
- table: 修复表格 `TableAction` 图标显示问题
- table: 修复表格列设置通过`setColumns`设置不显示
### 🎫 Chores ### 🎫 Chores

View File

@ -77,7 +77,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <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 { injectTable } from '../hooks/useProvinceTable';
import { Tooltip, Divider, Dropdown, Menu, Popover, Checkbox } from 'ant-design-vue'; import { Tooltip, Divider, Dropdown, Menu, Popover, Checkbox } from 'ant-design-vue';
import { import {
@ -132,7 +132,7 @@
const { toggleFullscreen, isFullscreenRef } = useFullscreen(table.wrapRef); const { toggleFullscreen, isFullscreenRef } = useFullscreen(table.wrapRef);
const selectedKeysRef = ref<SizeType[]>([table.getSize()]); const selectedKeysRef = ref<SizeType[]>([table.getSize()]);
let plainOptions: Options[] = []; const plainOptions = ref<Options[]>([]);
const state = reactive<State>({ const state = reactive<State>({
indeterminate: false, indeterminate: false,
checkAll: true, checkAll: true,
@ -142,6 +142,12 @@
const { t } = useI18n('component.table'); const { t } = useI18n('component.table');
watchEffect(() => {
const columns = table.getColumns();
if (columns.length) {
init();
}
});
function init() { function init() {
let ret: Options[] = []; let ret: Options[] = [];
table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => { table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => {
@ -150,7 +156,8 @@
value: (item.dataIndex || item.title) as string, value: (item.dataIndex || item.title) as string,
}); });
}); });
plainOptions = ret;
plainOptions.value = ret;
const checkList = table const checkList = table
.getColumns() .getColumns()
.map((item) => item.dataIndex || item.title) as string[]; .map((item) => item.dataIndex || item.title) as string[];
@ -171,7 +178,7 @@
function onCheckAllChange(e: ChangeEvent) { function onCheckAllChange(e: ChangeEvent) {
state.indeterminate = false; state.indeterminate = false;
const checkList = plainOptions.map((item) => item.value); const checkList = plainOptions.value.map((item) => item.value);
if (e.target.checked) { if (e.target.checked) {
state.checkedList = checkList; state.checkedList = checkList;
table.setColumns(checkList); table.setColumns(checkList);
@ -182,8 +189,9 @@
} }
function onChange(checkedList: string[]) { function onChange(checkedList: string[]) {
state.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length; const len = plainOptions.value.length;
state.checkAll = checkedList.length === plainOptions.length; state.indeterminate = !!checkedList.length && checkedList.length < len;
state.checkAll = checkedList.length === len;
table.setColumns(checkedList); table.setColumns(checkedList);
} }
@ -207,7 +215,6 @@
} }
); );
init();
return { return {
redo: () => table.reload(), redo: () => table.reload(),
handleTitleClick, handleTitleClick,

View File

@ -55,7 +55,7 @@ const viteConfig: UserConfig = {
* Available options are 'terser' or 'esbuild'. * Available options are 'terser' or 'esbuild'.
* @default 'terser' * @default 'terser'
*/ */
minify: isDevFn() ? 'esbuild' : 'terser', minify: isDevFn() ? false : 'terser',
/** /**
* Base public path when served in production. * Base public path when served in production.
* @default '/' * @default '/'