应对el-table中有el-input时，数据太多卡顿问题

卡顿是因为输入框数据是双向绑定的，输入内容时表格数据会刷新，重新渲染表格内容导致渲染次数太多会卡顿。网上大多数解决思路是用原生input替换el-input，再加上lazy，但是el-input的很多东西就用不了了，比如，校验
解决思路：封装el-input，给输入框加上节流，在输入内容之后过200ms之后再去更改表格的数据，这样表格渲染就变少，连续输入就不卡了，外部使用error显示校验结果

<template>
  <el-input v-model="dataColumnEname"
            size="mini"></el-input>
</template>

<script>
//防抖节流函数
import debounce from 'throttle-debounce/debounce'
export default {
  props: {
  //传进来的值
    value: {
      type: String,
    },
   // 传进来当前行的值，主要是为了报错信息
    row: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      dataColumnEname: '',
      debounceFunc: () => {},
    }
  },
  methods: {
    changeString() {
      this.$emit('input', this.dataColumnEname)
      this.$emit('blur')
    },
    input() {},
  },
  watch: {
    value: {
      handler(newval) {
        this.dataColumnEname = newval
      },
      immediate: true,
      dep: true,
    },
    dataColumnEname: {
      handler(newval) {
        this.debounceFunc()
      },
      immediate: true,
      dep: true,
    },
  },
  mounted() {
    this.debounceFunc = debounce(200, () => {
      this.$emit('input', this.dataColumnEname)
      // 表单验证错误信息，要是不需要可以不添加
      if (this.dataColumnEname == '') {
        this.$emit('rulesrow', this.row, '英文名不能为空')
      } else if (this.dataColumnEname.length > 30) {
        this.$emit('rulesrow', this.row, '长度不能超过30')
      } else {
        this.$emit('rulesrow', this.row, '')
      }
      // this.$emit('rulesrow', this.dataColumnEname)
    })
  },
}
</script>

<style>
</style>