vxe-table 中自定义模板，解决渲染单元格为 element-ui 组件后无法选中值

vxe-table 中自定义模板，解决渲染单元格为 element-ui 组件后无法选中值

如何解决跨组件之间的冲突

vxe-table 通过渲染器可以支持任意的 vue 组件，但在渲染大部分组件后默认是无法直接使用的，需要解决好跨组件之间的冲突

例如以下代码

虽然可以正常渲染和显示，但是会无法选中下拉选项，这就是跨组件的事件冲突，下面会提到解决办法

<vxe-table
      border
      show-overflow
      height="600"
      :data="tableData"
      :edit-config="{trigger: 'click', mode: 'row'}">
      <vxe-table-column type="checkbox" width="60">vxe-table-column>
      <vxe-table-column type="seq" width="80">vxe-table-column>
      <vxe-table-column field="name" title="ElInput" min-width="140" :edit-render="{type: 'default'}">
        <template v-slot:edit="scope">
          <el-input v-model="scope.row.name">el-input>
        template>
      vxe-table-column>
	  <vxe-table-column field="sex" title="ElSelect" width="140" :edit-render="{type: 'default'}">
        <template v-slot:edit="scope">
          <el-select v-model="scope.row.sex">
            <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">el-option>
          el-select>
        template>
        <template v-slot="{ row }">{
    { getSelectLabel(row.sex, sexList) }}template>
      vxe-table-column>
    vxe-table>

export default {
     
	data () {
     
		return {
     
			tableData: [
				{
     name: '名字1', sex: '0', age: 24},
				{
     name: '名字2', sex: '1', age: 26},
				{
     name: '名字3', sex: '1', age: 28},
				{
     name: '名字4', sex: '1', age: 30}
			],
			sexList: [
				{
     label: '男', value: '1'},
				{
     label: '女', value: '0'}
			]
		}
	},
	methods: {
     
		getSelectLabel (value, list) {
     
          let item = list.find(item => item.value === value)
          return item ? item.label : null
        }
	}
}

解决方法

1. 通过安装 vxe-table-plugin-element 插件来解决冲突（适合小白使用）

npm install vxe-table vxe-table-plugin-element

import Vue from 'vue'
import VXETable from 'vxe-table'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'

Vue.use(VXETable)
VXETable.use(VXETablePluginElement)

2. 通过事件拦截器，该方式相对复杂（可以自行解决任意组件的冲突，适合大神去深入解决细节问题）

VXETable.interceptor.add('event.clearActived', (params, event) => {
     
  // 比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
  if (event.target.className.indexOf('other-popper') > -1) {
     
    return false
  }
})

到此结束！可以开始动手玩玩了哈。