feat: 自定义列
This commit is contained in:
@ -20,17 +20,8 @@
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
}
|
||||
}
|
||||
.arco-modal-header {
|
||||
border-bottom: 1px solid var(--Border-1, #d7d7d9);
|
||||
height: 56px;
|
||||
padding: 0 20px;
|
||||
.arco-modal-title {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.arco-modal-body {
|
||||
padding: 24px 20px;
|
||||
.arco-form-item {
|
||||
margin-bottom: 16px;
|
||||
&:last-child {
|
||||
@ -46,13 +37,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arco-modal-footer {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
padding: 0px 20px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--Border-1, #d7d7d9);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<template #icon> <icon-download /> </template>
|
||||
<template #default>导出数据</template>
|
||||
</a-button>
|
||||
<a-button class="w-110px search-btn" size="medium">
|
||||
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
|
||||
<template #icon>
|
||||
<img :src="icon1" width="14" height="14" />
|
||||
</template>
|
||||
@ -106,14 +106,18 @@
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { STATUS_LIST } from '../../constants';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CustomTableColumnModal from '@/components/custom-table-column-modal';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-custom.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-warn.png';
|
||||
@ -134,6 +138,7 @@ const router = useRouter();
|
||||
|
||||
const selectedItems = ref([]);
|
||||
const tableRef = ref(null);
|
||||
const modalRef = ref(null);
|
||||
|
||||
const checkedAll = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
|
||||
@ -179,6 +184,14 @@ const resetTable = () => {
|
||||
tableRef.value?.clearSorters();
|
||||
};
|
||||
|
||||
const openCustomColumn = () => {
|
||||
modalRef.value.open();
|
||||
};
|
||||
|
||||
const onCustomColumnSuccess = (selectedColumns) => {
|
||||
console.log(selectedColumns);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
resetTable,
|
||||
});
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<template #icon> <icon-download /> </template>
|
||||
<template #default>导出数据</template>
|
||||
</a-button>
|
||||
<a-button class="w-110px search-btn" size="medium">
|
||||
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
|
||||
<template #icon>
|
||||
<img :src="icon1" width="14" height="14" />
|
||||
</template>
|
||||
@ -118,6 +118,8 @@
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -126,6 +128,7 @@ import { STATUS_LIST } from '../../constants';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CustomTableColumnModal from '@/components/custom-table-column-modal';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-custom.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-warn.png';
|
||||
@ -150,6 +153,7 @@ const router = useRouter();
|
||||
|
||||
const selectedItems = ref([]);
|
||||
const tableRef = ref(null);
|
||||
const modalRef = ref(null);
|
||||
|
||||
const checkedAll = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
|
||||
@ -203,6 +207,14 @@ const resetTable = () => {
|
||||
tableRef.value?.clearSorters();
|
||||
};
|
||||
|
||||
const openCustomColumn = () => {
|
||||
modalRef.value.open();
|
||||
};
|
||||
|
||||
const onCustomColumnSuccess = (selectedColumns) => {
|
||||
console.log(selectedColumns);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
resetTable,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user