解决 vxe-table v3.9 + element-ui 中使用 el-select 后无法选中的问题

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

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

安装步骤

npm install vxe-pc-ui@3.3.3 vxe-table@3.11.3 @vxe-ui/plugin-render-element@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 VxeUIPluginRenderElement from '@vxe-ui/plugin-render-element'
            import '@vxe-ui/plugin-render-element/dist/style.css'

            VxeUI.use(VxeUIPluginRenderAntd)

            Vue.use(VxeUI)
            Vue.use(VxeUITable)
            Vue.use(ViewUI)
            // ...

使用

<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="{ autofocus: '.el-input__inner' }">
        <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>
import { MessageBox } from 'element-ui'

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>

配置式

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

<script>
import { MessageBox } from 'element-ui'

export default {
  data () {
    const sexEditRender = {
      name: 'ElInput'
    }
  
    const sexEditRender = {
      name: 'ElSelect',
      options: [
        { label: '男', value: '1' },
        { label: '女', value: '0' }
      ]
    }
    
    const sexListEditRender = {
      name: 'ElSelect',
      props: {
        multiple: true
      },
      options: [
        { label: '男', value: '1' },
        { label: '女', value: '0' }
      ]
    }
    
    const gridOptions = {
      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: sexEditRender },
        { 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'] }
      ]
    }
    return {
      gridOptions
    }
  }
}
</script>

gitee.com/xuliangzhan…