展示列设置改变后表中数据刷新
This commit is contained in:
@@ -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 = () => {
|
||||||
|
|||||||
@@ -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 () => {
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user