vxe-pulldown下拉容器的使用，覆盖样式z-index来解决在Modal中初次显示在Modal的下层的问题。

1、官网的例子：

可以说这个vxe-pulldown用起来还是挺方便的。

2、代码：

<template>
  <div>
    <vxe-pulldown ref="pulldownRef" popup-class-name="my-dropdown4" transfer>
      <template #header>
        <div class="my-headdown4">
          <vxe-button mode="text" status="primary">按钮1</vxe-button>
          <vxe-button mode="text" status="danger">按钮2</vxe-button>
        </div>
      </template>

      <template #default>
        <vxe-input v-model="searchName" suffix-icon="vxe-icon-table" placeholder="实现下拉分页表格" @keyup="keyupEvent" @focus="focusEvent" @suffix-click="suffixClick"></vxe-input>
      </template>

      <template #dropdown>
        <div class="my-bodydown4">
          <vxe-grid
            border
            auto-resize
            height="auto"
            :row-config="{isHover: true}"
            :loading="loading"
            :pager-config="pagerConfig"
            :data="tableData"
            :columns="tableColumn"
            @cell-click="cellClickEvent"
            @page-change="pageChangeEvent">
          </vxe-grid>
        </div>
      </template>

      <template #footer>
        <div class="my-footdown4">
          <vxe-button mode="text" status="primary">底部</vxe-button>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { VxeGridEvents, VxePulldownInstance } from 'vxe-table'

interface RowVO {
  name: string
  role: string
  sex: string
}

const searchName = ref('')

const loading = ref(false)
const tableColumn = ref([
  { field: 'name', title: 'Name' },
  { field: 'role', title: 'Role' },
  { field: 'sex', title: 'Sex' }
])
const tableData = ref<RowVO[]>([])

const tableList = ref<RowVO[]>([
  { name: 'Test1', role: '前端', sex: '男' },
  { name: 'Test2', role: '后端', sex: '男' },
  { name: 'Test3', role: '测试', sex: '男' },
  { name: 'Test4', role: '设计师', sex: '女' },
  { name: 'Test5', role: '前端', sex: '男' },
  { name: 'Test6', role: '前端', sex: '男' },
  { name: 'Test7', role: '前端', sex: '男' }
])

const pagerConfig = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})

const pulldownRef = ref<VxePulldownInstance>()

const focusEvent = () => {
  const $pulldown = pulldownRef.value
  if ($pulldown) {
    $pulldown.showPanel()
  }
}

const keyupEvent = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    if (searchName.value) {
      tableData.value = tableList.value.filter((row) => row.name.indexOf(searchName.value) > -1)
    } else {
      tableData.value = tableList.value.slice(0)
    }
  }, 100)
}

const suffixClick = () => {
  const $pulldown = pulldownRef.value
  if ($pulldown) {
    $pulldown.togglePanel()
  }
}

const cellClickEvent: VxeGridEvents.CellClick = ({ row }) => {
  const $pulldown = pulldownRef.value
  if ($pulldown) {
    searchName.value = row.name
    $pulldown.hidePanel()
  }
}

const pageChangeEvent: VxeGridEvents.PageChange = ({ currentPage, pageSize }) => {
  pagerConfig.currentPage = currentPage
  pagerConfig.pageSize = pageSize
}

onMounted(() => {
  keyupEvent()
})
</script>

<style lang="scss">
.my-dropdown4 {
  background-color: #fff;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  .my-bodydown4 {
    width: 600px;
    height: 300px;
  }

  .my-footdown4 {
    border-top: 1px solid #e8eaec;
  }
}
</style>

3、项目中是一个Modal里面用到了wxe-pulldown，初次点击的时候，会显示在Modal的下层，一般我们会想到是覆盖z-index就可以解决了，但是不知道是哪个样式。

4、重新覆盖 vxe-pulldown--panel 样式的z-index来解决

.vxe-pulldown--panel {
    z-index: 1000 !important;
  }

这里panel的前面有--二个-。

这里的z-index只要设大一些就可以了。然后就会显示在Modal的上层了。