diff --git a/src/components/RePureTableBar/src/bar.tsx b/src/components/RePureTableBar/src/bar.tsx index b2a755567d..6157852492 100644 --- a/src/components/RePureTableBar/src/bar.tsx +++ b/src/components/RePureTableBar/src/bar.tsx @@ -1,7 +1,15 @@ import Sortable from "sortablejs"; import { transformI18n } from "@/plugins/i18n"; import { useEpThemeStoreHook } from "@/store/modules/epTheme"; -import { defineComponent, ref, computed, type PropType, nextTick } from "vue"; +import { + type PropType, + ref, + unref, + computed, + nextTick, + defineComponent, + getCurrentInstance +} from "vue"; import { delay, cloneDeep, @@ -34,6 +42,10 @@ const props = { isExpandAll: { type: Boolean, default: true + }, + tableKey: { + type: [String, Number] as PropType, + default: "0" } }; @@ -46,6 +58,7 @@ export default defineComponent({ const loading = ref(false); const checkAll = ref(true); const isIndeterminate = ref(false); + const instance = getCurrentInstance()!; const isExpandAll = ref(props.isExpandAll); const filterColumns = cloneDeep(props?.columns).filter(column => isBoolean(column?.hide) @@ -170,9 +183,9 @@ export default defineComponent({ const rowDrop = (event: { preventDefault: () => void }) => { event.preventDefault(); nextTick(() => { - const wrapper: HTMLElement = document.querySelector( - ".el-checkbox-group>div" - ); + const wrapper: HTMLElement = ( + instance?.proxy?.$refs[`GroupRef${unref(props.tableKey)}`] as any + ).$el.firstElementChild; Sortable.create(wrapper, { animation: 300, handle: ".drag-btn", @@ -299,6 +312,7 @@ export default defineComponent({
handleCheckedColumnsChange(value)} >