在js文件中写el表达式取不到值的原因及解决方法

在js文件中写el表达式取不到值的原因可能是因为js文件的加载顺序在vue组件实例挂载之前，解决方法一般有两种：使用Vue.mixin全局混入方法和使用this.$nextTick()方法。

在js文件中写el表达式取不到值的原因可能是因为js文件的加载顺序在vue组件实例挂载之前，解决方法一般有两种：使用Vue.mixin全局混入方法和使用this.$nextTick()方法。

使用Vue.mixin全局混入方法

1. 首先在main.js中定义一个mixin，定义一个生命周期函数created，将所有需要共享的数据，例如公共的配置信息，挂到this.$options全局配置中，这样每个组件都可以通过this.$options访问到该对象。

Vue.mixin({
  created: function () {
    this.$options.sharedData = {
      someValue: 'Any value you need'
    };
  }
});

1. 在组件中使用时，直接调用this.$options.sharedData.someValue来使用。例如：

export default {
  methods: {
    showSomeValue() {
      console.log(this.$options.sharedData.someValue);
    }
  }
};

使用this.$nextTick()方法

1. 在mounted操作中使用定时器设置一段时间延迟，等待DOM操作完成，之后就可以使用el表达式。

export default {
  mounted () {
    setTimeout(() => {
      // 获取组件中的el元素
      const el = this.$el.querySelector('.el-table__body-wrapper')
      console.log('el', el) // 输出为DOM元素
    }, 0)
  }
}

1. 在mounted操作中使用this.$nextTick()方法等待DOM操作完成之后就可以使用el表达式。

export default {
  mounted () {
    this.$nextTick(() => {
      // 获取组件中的el元素
      const el = this.$el.querySelector('.el-table__body-wrapper')
      console.log('el', el) // 输出为DOM元素
    })
  }
}

以上两种方法都可以解决js文件中使用el表达式无法获取数据的问题，通过全局混入方法和this.$nextTick()方法可以在mounted完成渲染之后，获取到正确的el表达式值。