解决 vxe-table v3.9 + iview 或者 view-design 中使用 Select 后无法选中的问题

官网文档：https://vxetable.cn

在开发 vue 项目中，使用 vxe-table 时，当同时配合 iview 或者 view-design 组件库使用时，发现一个问题，就是在单元格中渲染 Select 时，会导致下拉选项无法被选中，点击后立马就消失的问题

安装步骤

npm install vxe-pc-ui@3.3.3 vxe-table@3.11.3 @vxe-ui/plugin-render-iview@3.0.0

            // ...import VxeUI from 'vxe-pc-ui'import 'vxe-pc-ui/lib/style.css'import VxeUITable from 'vxe-table'import 'vxe-table/lib/style.css'import ViewUI from 'view-design'import 'view-design/dist/styles/iview.css'// 扩展插件import VxeUIPluginRenderIView from '@vxe-ui/plugin-render-iview'import '@vxe-ui/plugin-render-iview/dist/style.css'VxeUI.use(VxeUIPluginRenderIView)Vue.use(VxeUI)Vue.use(VxeUITable)Vue.use(ViewUI)// ...

使用

<template><div><vxe-tablebordershow-overflowkeep-sourceref="tableRef":edit-config="{ trigger: 'click', mode: 'row'}":data="tableData"><vxe-column type="checkbox" width="60"></vxe-column><vxe-column type="seq" title="Number" width="80"></vxe-column><vxe-column title="Name" field="name" min-width="140" :edit-render="{}"><template #edit="{ row }"><Input v-model="row.name"></Input></template></vxe-column><vxe-column title="下拉框" field="sex" width="200" :edit-render="{}"><template #default="{ row }"><span>{{ formatSexLabel([row.sex]) }}</span></template><template #edit="{ row }"><Select v-model="row.sex"><Option v-for="item in sexOptions" :key="item.value" :value="item.value">{{ item.label }}</Option></Select></template></vxe-column><vxe-column title="下拉框多选" field="sexList" width="200" :edit-render="{}"><template #default="{ row }"><span>{{ formatSexLabel(row.sexList) }}</span></template><template #edit="{ row }"><Select v-model="row.sexList" multiple><Option v-for="item in sexOptions" :key="item.value" :value="item.value">{{ item.label }}</Option></Select></template></vxe-column></vxe-table></div>
</template><script>
export default {data () {const tableData = [{ id: 10001, name: 'Test1', sex: '1', sexList: [] },{ id: 10002, name: 'Test2', sex: '', sexList: ['0', '1'] }]const sexOptions = [{ label: '男', value: '1' },{ label: '女', value: '0' }]return {tableData,sexOptions}},methods: {formatSexLabel (sexList) {if (sexList) {return sexList.map(sex => {const item = this.sexOptions.find(item => item.value === sex)return item ? item.label : sex}).join(',')}return ''}}
}
</script>