解决 vxe-table + element-plus 中使用 el-select 后无法选中的问题

官网：vxetable.cn/
Gitee：gitee.com/x-extends/v…
Github：github.com/x-extends/v…

在开发 vue 大型项目中，必然少不了 vxe-table 专业的表格库，当同时配合 element-plus 组件库使用时，发现一个问题，就是在单元格中渲染 el-select 时，会导致下拉选项无法被选中，点击后立马就消失，看了 vxe-table 官方文档，是支持与任意第三方库集成的，发现官网扩展插件里面有个适配插件安装一下就可以了正常选择了。而且还ts只是配置式渲染，非常好用。

安装步骤

npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 @vxe-ui/plugin-render-element@4.0.7

            // ...
            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 ElementPlus from 'element-plus'
            import 'element-plus/dist/index.css'

            // 扩展插件
            import VxeUIPluginRenderElement from '@vxe-ui/plugin-render-element'
            import '@vxe-ui/plugin-render-element/dist/style.css'

            VxeUI.use(VxeUIPluginRenderElement)

            createApp(App).use(VxeUI).use(VxeUITable).use(ElementPlus).mount('#app')
            // ...

使用

<template>
  <div>
    <vxe-table
      border
      show-overflow
      keep-source
      :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 }">
          <el-input v-model="row.name"></el-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 }">
          <el-select v-model="row.sex">
            <el-option v-for="item in sexOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-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 }">
          <el-select v-model="row.sexList" multiple>
            <el-option v-for="item in sexOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const sexOptions = ref([
  { label: '男', value: '1' },
  { label: '女', value: '0' }
])

const tableData = ref([
  { id: 10001, name: 'Test1', sex: '1', sexList: [] },
  { id: 10002, name: 'Test2', sex: '', sexList: ['0', '1'] }
])

const formatSexLabel = (sexList) => {
  if (sexList) {
    return sexList.map(sex => {
      const item = sexOptions.value.find(item => item.value === sex)
      return item ? item.label : sex
    }).join(',')
  }
  return ''
}
</script>

配置式

<template>
  <div>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const sexEditRender = reactive({
  name: 'ElSelect',
  options: [
    { label: '男', value: '1' },
    { label: '女', value: '0' }
  ]
})

const sexListEditRender = reactive({
  name: 'ElSelect',
  props: {
    multiple: true
  },
  options: [
    { label: '男', value: '1' },
    { label: '女', value: '0' }
  ]
})

const gridOptions = reactive({
  border: true,
  showOverflow: true,
  keepSource: true,
  editConfig: {
    trigger: 'click',
    mode: 'row'
  },
  columns: [
    { type: 'checkbox', width: 60 },
    { type: 'seq', title: 'Number', width: 80 },
    { field: 'name', title: 'Name', minWidth: 140, editRender: { name: 'ElInput' } },
    { field: 'sex', title: '下拉框', width: 200, editRender: sexEditRender },
    { field: 'sexList', title: '下拉框多选', width: 200, editRender: sexListEditRender }
  ],
  data: [
    { id: 10001, name: 'Test1', sex: '1', sexList: [] },
    { id: 10002, name: 'Test2', sex: '', sexList: ['0', '1'] }
  ]
})
</script>

gitee.com/xuliangzhan…