展示列设置改变后表中数据刷新

This commit is contained in:
付民康
2025-03-27 15:09:52 +08:00
parent 1f65abb5df
commit 6a64978dab
3 changed files with 24 additions and 4 deletions

View File

@@ -20,7 +20,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineProps, defineEmits,onMounted,onUnmounted } from 'vue'; import { ref, defineProps, defineEmits,onMounted,onUnmounted,watch } from 'vue';
const props = defineProps({ const props = defineProps({
@@ -34,8 +34,17 @@ const props = defineProps({
}, },
}); });
// 监听 columns 的变化,当 visible 属性改变时触发 updateTableKey
watch(
() => props.columns,
(newColumns) => {
emits('updateTableKey');
},
{ deep: true } // 深度监听,以便检测到对象内部属性的变化
);
// 定义 emit用于更新 showColumnList // 定义 emit用于更新 showColumnList
const emits = defineEmits(['update:show-column-list','setDefult']); const emits = defineEmits(['update:show-column-list','setDefult','updateTableKey']);
// 切换多选列表的显示 // 切换多选列表的显示
const toggleColumnList = () => { const toggleColumnList = () => {

View File

@@ -32,6 +32,7 @@
<TableSetting <TableSetting
:columns="columns" :columns="columns"
@setDefult="setDefult" @setDefult="setDefult"
@updateTableKey="updateTableKey"
:show-column-list="showColumnList" :show-column-list="showColumnList"
@update:show-column-list="updateShowColumnList" @update:show-column-list="updateShowColumnList"
/> />
@@ -341,13 +342,17 @@ const onSearch = (str: string) => {
const router = useRouter(); const router = useRouter();
const updateTableKey = () => {
tableKey.value++; // 更新 tableKey强制刷新表格
};
// 定义 showColumnList 状态 // 定义 showColumnList 状态
const showColumnList = ref(false); const showColumnList = ref(false);
// 更新 showColumnList 的方法 // 更新 showColumnList 的方法
const updateShowColumnList = (newValue) => { const updateShowColumnList = (newValue) => {
showColumnList.value = newValue; showColumnList.value = newValue;
tableKey.value++; // 更新 tableKey强制刷新表格 // tableKey.value++; // 更新 tableKey强制刷新表格
}; };
const handleBatchImport = async () => { const handleBatchImport = async () => {

View File

@@ -77,6 +77,7 @@
<TableSetting <TableSetting
:columns="columns" :columns="columns"
@setDefult="setDefult" @setDefult="setDefult"
@updateTableKey="updateTableKey"
:show-column-list="showColumnList" :show-column-list="showColumnList"
@update:show-column-list="updateShowColumnList" @update:show-column-list="updateShowColumnList"
/> />
@@ -372,10 +373,15 @@ const openOrgModal = () => {
orgModalRef.value.openModal(); // 调用子组件的方法 orgModalRef.value.openModal(); // 调用子组件的方法
} }
}; };
// 更新 showColumnList 的方法
const updateTableKey = () => {
tableKey.value++; // 更新 tableKey强制刷新表格
};
// 更新 showColumnList 的方法 // 更新 showColumnList 的方法
const updateShowColumnList = (newValue) => { const updateShowColumnList = (newValue) => {
showColumnList.value = newValue; showColumnList.value = newValue;
tableKey.value++; // 更新 tableKey强制刷新表格 // tableKey.value++; // 更新 tableKey强制刷新表格
}; };
// 更新 showColumnList 的方法 // 更新 showColumnList 的方法
const openCountryChart = (row) => { const openCountryChart = (row) => {