表格中大量表单组件会使表格数据更新的时候卡顿，封装elselect，可以在span和input之间切换

组件使用

          <cutSelect :columnList="[{label:'忽略',value:3},{label:'已解决',value:2},{label:'未解决',value:1}]"
                     :row="scope.row"
                     :name="'status'"
                     :index="scope.$index"
                     @change="setIgnoreUpdate"
                     :selectSetting="{
                    label:'label',
                    value:'value'
                  }"></cutSelect>

组件代码

<template>
  <div>
    <div v-if="!state"
         :class="value==0?' cell filter':'colora0cfff cell filter'"
         style="height: 28px"
         @click="edit">
      <div style="float: left;max-width: calc(100% - 40px);line-height:24px">{{ valueData }}</div>
      <i class="el-icon-edit"
         v-show="!disabled"
         style="float: left;line-height:24px;padding-left: 5px;color: #409EFF;"></i>
    </div>
    <div v-else
         class="cell">
      <el-select v-model="value"
                 v-bind="$attrs"
                 v-on="$listeners"
                 v-if="!groupSelect"
                 ref="ediTableSelect"
                 size="mini"
                 class="filter"
                 :remote="remote"
                 filterable
                 :allow-create="allowCreate"
                 :remote-method="remoteMethod"
                 @change="handleChange"
                 @visible-change="(value)=>visibleChange(value)"
                 @blur="blur"
                 placeholder="请选择">
        <el-option v-for="(item,index) in columnList"
                   :key="index"
                   :label="item[selectSetting.label]"
                   :value="item[selectSetting.value]">
        </el-option>
      </el-select>
      <el-select v-model="value"
                 v-else
                 ref="ediTableSelect"
                 size="mini"
                 class="filter"
                 :remote="remote"
                 filterable
                 :allow-create="allowCreate"
                 :remote-method="remoteMethod"
                 @change="handleChange"
                 @visible-change="(value)=>visibleChange(value)"
                 @blur="blur"
                 placeholder="请选择">
        <el-option-group v-for="group in columnList"
                         :key="group.label"
                         :label="group.label">
          <el-option v-for="(item,index) in group.columnList"
                     :key="index"
                     :disabled="item.disabled"
                     :label="item[selectSetting.label]"
                     :value="item[selectSetting.value]">
          </el-option>
        </el-option-group>
      </el-select>
    </div>

  </div>

</template>

<script>
export default {
  props: {
    index: {
      type: Number,
    },
    row: {
      type: Object,
    },
    name: {
      type: String,
    },
    valueName: {
      type: String,
      default: 'null',
    },
    columnList: {
      type: Array,
    },
    remote: {
      type: Boolean,
      default: false,
    },
    remoteMethod: {
      type: Function,
    },
    selectSetting: {
      type: Object,
      default: {
        label: `label`,
        value: `value`,
      },
    },
    allowCreate: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    groupSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      state: false,
      value: '',
      item: {},
    }
  },
  computed: {
    valueData() {
      if (this.valueName != 'null') {
        return this.row[this.valueName]
      } else {
        if (this.groupSelect) {
          let value = ''
          this.columnList.forEach((item) => {
            item.columnList.forEach((ele) => {
              if (ele[this.selectSetting.value] == this.value) {
                value = ele[this.selectSetting.label]
                this.item = ele
              }
            })
          })
          return value
        } else {
          let value = ''
          this.columnList.forEach((ele) => {
            if (ele[this.selectSetting.value] == this.value) {
              value = ele[this.selectSetting.label]
              this.item = ele
            }
          })
          return value
        }
      }
      //   let value = ''
      //   this.columnList.forEach((ele) => {
      //     if (ele[this.selectSetting.value] == this.value) {
      //       value = ele[this.selectSetting.label]
      //       this.item = ele
      //     }
      //   })
      //   return value
    },
  },
  watch: {
    row: {
      immediate: true,
      deep: true,
      handler(newVal) {
        // console.log(newVal)
        this.value = newVal[this.name]
      },
    },
  },
  methods: {
    edit() {
      if (!this.disabled) {
        this.state = true

        this.$nextTick(() => {
          console.log(this.$refs.ediTableSelect)
          this.$refs.ediTableSelect.focus()
        })
      }
    },
    handleChange() {
      this.$nextTick(() => {
        this.check()
      })
    },
    blur(e) {
      setTimeout(() => {
        this.state = false
        this.$emit('blur', e)
      }, 400)
    },
    check(e) {
      setTimeout(() => {
        // console.log(this.value, this.columnList)
        if (this.groupSelect) {
          this.columnList.forEach((item) => {
            item.columnList.forEach((ele) => {
              if (ele[this.selectSetting.value] == this.value) {
                this.item = ele
              }
            })
          })
        } else {
          this.columnList.forEach((ele) => {
            if (ele[this.selectSetting.value] == this.value) {
              this.item = ele
            }
          })
        }
        this.$emit('change', {
          value: this.value,
          index: this.index,
          name: this.name,
          item: this.item,
          row: this.row,
        })
        this.state = false
      }, 100)
    },
    visibleChange(value) {
      this.$emit('visible-change', value)
    },
  },
}
</script>

<style scoped>
.colora0cfff {
  color: #53a8ff;
}
</style>